多级联动菜单在许多的筛选场景应用十分广泛。
先看看效果图:
menu.wxml
menu.wxss
menu.jsp
menu.wxss
menu.js
menu.wxml
menu.wxss
menu.js
这里主要针对一个菜单栏进行详细讲解,其余两个原理相同。
游戏
menu.wxml
这里推荐大家使用 <scroll-view></scroll-view> 组件,这样超过限定的高度的话,就可以在内部产生滚动条,整体布局不会乱。使用 <scroll></scroll> 组件的时候,记得要开启滚动的方向(scroll-y表示纵向,scroll-x表示横向),这些属性默认是关闭的。
menu.wxss
注意:使用竖向滚动时,需要给<scroll-view/>一个固定高度,通过 WXSS 设置 height。
menu.js
menu.js部分主要的难点就是wxml和js之间的数据交互,这里很容易弄晕,尤其是对自己定义的变量弄清楚是什么意思。在这里我画了一个示意图来讲解这个难点。
最后给大家提供该项目的github项目,直接抓下来就可以打开使用,只需对显示的数据进行修改即可。
拟设计一个设备故障状况选择器,需要三级联动,第一级:设备大类;第二级:设备细类;第三级:故障描述,如下图:
1、需要引入vant-picker,需要定制一个数组,包含三级即[一级,一级内容,子类[二级,二级内容,子类[三级,三级内容]]],如下图
2、在vant-picker的onChange事件中,对上面数组进行分级控制。
3、难点,需要把数组按三级拆分出来,放到picker的三列中,控制不好就会各种报错。
1、json,引入vant-picker
2、wxml
绑定change confirm 2个必须事件
3、js文件
3.1 定义选项内容,需要分成三级
3.2 data 中实现picker3列
3.3 onChange 事件实现
3.4 常见问题
3.4.1 最后一级如果没有内容,vant-picker会报错,所以需要做一个空判断,如果为空,赋值一个常量
3.4.2 是使用value,还是选择使用自己定义的常量,需要调试看。value值已经获取到了三列数据,但是容易出错。我最后还是选择使用原来定义常量proSelectList。
4.1 三级数据齐全的选择
4.2 第三级如果为空,第三列使用默认数据
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)