移动端开发之主页框架搭建原创
金蝶云社区-别等时光非礼了梦想
别等时光非礼了梦想
0人赞赏了该文章 219次浏览 未经作者许可,禁止转载编辑于2023年08月10日 19:33:09

上传图片

 先上图,移动端页面底部带有操作菜单,当时比较纠结两种方案:

  1. 创建四个页面,每个页面底部带有菜单,然后跳转的时候采用showFrom跳转页面展示;

  2. 创建五个页面(最后改为了四个页面,后面说明),第一个页面只有底部菜单和一个Flex面板,另外四个页面不带有底部菜单,只有中间展示内容;当点击菜单时,通过设置openStyle的方式,把四个页面交替加载到第一个页面的Flex面板上展示;

最终综合考虑,采用了第二种方案,因为第一种方案会在切换页面时出现底部菜单闪现的情况;

其中重点代码实现:

    1.点击底部菜单加载页面到Flex面板

image.png

    2.点击底部菜单按钮,进行菜单图标更换(由暗色变为亮色)

image.png

    3.点击底部菜单按钮,动态更换顶部标题(客户使用的云之家,有两种方式)

    (1)设置setCaption

image.png

    (2)调用云之家js桥,设置title

image.png


    最后实现改为四个页面,因为我们的首页是有一个轮播图的,通过openStyle加载到Flex面板上,会导致轮播图不自动轮播了,查了下是因为嵌套问题,所以后来把菜单页面和首页融合到一个页面上(如下图),点击首页以外菜单时,隐藏首页内容FLEX,显示动态加载容器;

image.png






赞 0