• 当前标签:多列选择器

程序开发 微信小程序picker组件中多列选择器的使用

小程序官方写的picker组件的文档看不懂,只能百度上搜搜; wxml: <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{index}}" range="{{label}}">     <view class="picker">         <input disabled name="label_id" placeholder='请选择您发布内容的标签' value='{{label[0][index[0]]}},{{label[1][index[1]]}}'></input>     </view> </picker> js: bindMultiPickerChange: function (e) {     let that = this;     console.log('picker发送选择改变,携带值为', e.detail.value)  // 得到两级列表的索引值 类型为数组     this.setData({       index: e.detail.value,     })   },   bindMultiPickerColumnChange: function (e) {     // console.log('修改的列为', e.detail.column, ',值为', e.detail.value);     let that = this;     let column = e.detail.column // 第一栏索引值     let val = e.detail.value; // 第二栏索引值     let ssls = that.data.labelList; // 所有数据     //定义对应变量     var sheng = that.data.label[0]; // 一级列表     var shi = []; // 二级列表     switch (column) {       case 0:         //此处是拖动第一栏的时候处理         for (var u in ssls[val].childList) {           shi.push(ssls[val].childList[u].labelName)         }         that.setData({           label: [sheng, shi],           index: [val, 0] // 初始化二级列表回第一项         });         break;       case 1:         //此处是拖动第二栏的时候处理         break;     }   }, 参考:微信小程序三级联动之多列选择器

2018-03-15 14:54:30 101 2 0
阅读详情
  • 1
前往