一番 *** 作以后,发现在层级不复杂的页面效果野蚂很不错,但是在一些view嵌套view嵌套的很深,比如里面已经有非statics的父view时,那么这个选择器的d窗显示的位置就不对了。同事说这个通过view肯定是实现不了,毕竟父view范围就那么大,除非把选择器view放到page里面去 ,是可以实现,但是违背了封装组件的原则。同事说试试half-screen-dialog,结果发现提供的Slot效果达扒洞不到UI要求.
如今有方法对half-screen-dialog的内部元素样式进行设置了,赶紧搞起。 最终结果还是挺好的。因为是dialgod出,所以不用考虑父view的范围问题了。
拟设计一个设备故腔销亏障状况选择器,需要三级联动,第一级:设备大类;第二级:设备细类;第三级:故障描述,如下图:
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 第三级如果为空,第三列使用默认数据
于是我在服务器端把索引数虚谨贺组中的key和value用个循环分离出来,晌宏再存入新数组差派中。如图[plain] view plain copy
{
a : 'a_value',
b : 'b_value'
}
改为
[plain] view plain copy
{
keys : [a, b],
values : ['a_value', 'b_value']
}
然后就可以用picker显示了,而且keys数组和values数组的index是对应的,如果想取出原来的索引只需要values[index]即可,
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)