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 第三级如果为空,第三列使用默认数据
解决方法:给绑定change事件的元素或组件另外添加@click.stop指向一个空函数,用来阻止冒泡
注:此方法主要用于mpvue,@click.stop是vue中阻止点击事件冒泡的方法。如果是原生小程序应该为绑定拿槐change事件的元素或组件添加catchtap绑定一个空函数
这是在用mpvue开发小程序时遇到一个问题,项目需要引用小程序的picker选择器组件,发现在点击picker选择器触发其change事件时会触发picker选择器外层父元素的点击事件(项目需要实现对一个模块进行点击跳转,同时要求模块内的一个子元素有选择器功能)绝纤
开始通过查看vue文档和小程序文档,找到两种方法,分别是vue的.stop阻止冒泡和小程序的catch前缀,但通过测试发现给change事件直接添加.stop或者catch没有用
最后选用了网上搜到的一个折中的方法,给picker选择器另外添加一个点击事件(或者给选择器的父元素添加点击事件),为新加的点击事件添加阻止冒泡方法,使点击事件指向一个空函数。这样也就间接的解决了change事件冒泡的问题
如果大家还有更好的方法,欢迎留言并敏仿
用框架做项目可以事半功倍,它封装好的各种功能免去你很大部分的工作。返首taro+taroui可以很好的实现开发一次,多端运行为目的的小程序。
Taro UI - Picker 选择器是从底部旅世歼d起的滚动选择器,从官网给出的示例来看,通过onChange可以改变值,state的数据储存也是很简单的
state={selector:['美国','中国','巴西','日本']}
但是做项目的时候,数据的结构不可能那么简单,有时候是多层嵌套+多个条件选择,比如:
options数组里有3个对象,即要渲染出3个Picker选择器。
在当前js中拆冲,是无法在循环条件下渲染出来选择器的,就onChange触发的函数来说,就没法监听是由哪个对象改变的。
其实解决办法很简单,将选择器抽取出来为组件,父页面循环数组给子组件传递单个对象,这样渲染出来的每个选择器都是相互独立的,内调的onChange方法在子组件内部监听,也不会影响其他选项。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)