支付宝页面网页设计 第1篇
–版本
只提供版本下载，更高版本属于收费版本，版本不支持APP，以上版本支持三端（APP，小程序，H5） Demo效果可扫描下方的二维码查看。 源码使用Hbuilder导入插件即可使用。无后端代码。 兼容所有热门终端。小程序，安卓，iOS，H5 完美兼容！
SUMER UI 【用于开发APP、小程序、H5网站、毕业设计…】
支付宝页面网页设计 第2篇
本章呢主要是给前面学的知识点的一个总结,还有提升自己在鸿蒙界面开发中一个整体布局的能力,要注意的是,我们在设计界面的时候尽量不要随意给高度,就像最外层的column组件一定不要给,因为在我们实现滚动的时候就会被高度限制,导致滚动失效,本章我用到了两个新组件一个stack层叠组件,一个scroll滚动组件,还有一个属性layoutweight特别好用的一个组件属性,特别是当组件间的间隔相同且有规律,这可以作为首选
支付宝页面网页设计 第3篇
我们设置好后我们可以看到,我们设置的区块居中显示,而我们需要将它固定在底部,我们可以使用层叠布局将白色区域固定在页面底部 给组件内部添加图标 我这里采用的是layoutweight让他们进行子使用缩放,为的就是使得整个导航栏更加灵活,无论我们是往里面添加还是删除子菜单都不会影响到底部导航栏的排版,他们之间的间距都会自适应缩放 添加一个子菜单,依然会自适应子菜单之间的宽度
层叠关系依然是使用我们的stack()组件,这里要想我们的主体页面达到滚动的效果,我们可以让一个scroll组件将主体部分包裹即可 设置了宽高,却没有显示,是因为头部的层级太低了,被遮住了,我们只需要使zIndex将头部的层级调大就可以了 继续是通过stack中的方位,将导航栏固定到顶部
布局: 一个行包裹四个列,为了实现四个快捷菜单之间的间距自适应,我们依然可以给每个column设置layoutweight(1)属性,我们可以不用给此设置高度,最后面只需要给row设置一个内边距,把区域撑大就可以了
服务导航的布局我们清晰的可以看到,是一个column包裹三个row,然后每个row中包裹五个column,因为每一个快捷菜单之间的间距都是一致的,我们依然使用自适应去做,只需要给row中的每个column加上layoutweight(1)即可,在row中的想要调节五个column之间的间距,我们可以直接给row传入对象space: 进行设置,同理,我们想要拉开三个row垂直的间距,可以直接给最外层的column设置一个space即可