使用ivx实现页面导航的经验总结

时间：2020-03-26 23:12:55 阅读：234 评论：0 收藏：0 [点我收藏+]

页面导航与标签导航十分类似，功能和使用方法也基本一致，区别在于页面导航更多用于移动端页面、APP功能页面之中。
技术图片

1.将页面划分为两个区域，底部的行用来作为页面导航器，上面的行用于展示各个页面的内容。
技术图片

2.将页面导航器的标签和图标填入对象数组作为循环创建的数据来源，for容器下是一个列容器，里面是一个文本组件和图片组件，分别绑定对象数组的标签名和图片。技术图片

3.给for容器下的列容器添加点击事件，当点击列时将当前数据的标签名赋值给文本变量“选中的标签”，同时对列的背景颜色进行数据绑定。这里还是使用了一个三元表达式，对每个循环创建出来的列容器进行判断，如果当前列的标签名与“选中的标签”相同则背景颜色是rgba(0,0,0,0.32)，否则就是空的，即透明显示的是标签行的背景颜色#5FA2DD。这里解释一下rgba(0,0,0,0.32)，rgb是另一种颜色的表示形式，最后的a对应的0.32则是一个透明度，所以可以理解为将其背景颜色设置为32%透明的黑色。
技术图片

4.最后是在内容行里添加各个页面，这里与标签页导航一样，也是将各个导航页面（demo这里是一个文本组件加一个行容器）放进if容器中，让每个导航页面对应一个标签，最后只显示与“选中的标签”相同的那个导航页面。
技术图片

5.拓展组件中的导航页容器
拓展组件中也包含实现此功能的导航页容器，在导航页容器中我们可以设置标签部分的大小及选中效果，每个导航页则是作为一个页面容器，我们可以在里面添加设置各种布局组件，并且也可以设置该导航页的标签的图标效果。
技术图片

总结
大家可能还会想到一种做法，就是在前台直接添加多个页面和一个横幅，让横幅作为导航行。这样做要注意的是横幅是盖在页面上的而不是像demo中两个平级的行容器，所以页面要保证横幅所盖住的地方是没有重要信息的，否则会影响用户体验。

使用ivx实现页面导航的经验总结

标签：区域 process 否则直接 shadow roc 点击事件功能理解

原文地址：https://blog.51cto.com/14556317/2482205

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行