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

原创 黄良钵  2018-03-15 14:54  阅读 559 次 评论 2 条

微信小程序picker组件中多列选择器的使用
小程序官方写的picker组件的文档看不懂,只能百度上搜搜;

wxml:

  1. <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{index}}" range="{{label}}">
  2.     <view class="picker">
  3.         <input disabled name="label_id" placeholder='请选择您发布内容的标签' value='{{label[0][index[0]]}},{{label[1][index[1]]}}'></input>
  4.     </view>
  5. </picker>

js:

  1. bindMultiPickerChange: function (e) {
  2.     let that = this;
  3.     console.log('picker发送选择改变,携带值为', e.detail.value)  // 得到两级列表的索引值 类型为数组
  4.     this.setData({
  5.       index: e.detail.value,
  6.     })
  7.   },
  8.   bindMultiPickerColumnChange: function (e) {
  9.     // console.log('修改的列为', e.detail.column, ',值为', e.detail.value);
  10.     let that = this;
  11.     let column = e.detail.column // 第一栏索引值
  12.     let val = e.detail.value; // 第二栏索引值
  13.     let ssls = that.data.labelList; // 所有数据
  14.     //定义对应变量
  15.     var sheng = that.data.label[0]; // 一级列表
  16.     var shi = []; // 二级列表
  17.     switch (column) {
  18.       case 0:
  19.         //此处是拖动第一栏的时候处理
  20.         for (var u in ssls[val].childList) {
  21.           shi.push(ssls[val].childList[u].labelName)
  22.         }
  23.         that.setData({
  24.           label: [sheng, shi],
  25.           index: [val, 0] // 初始化二级列表回第一项
  26.         });
  27.         break;
  28.       case 1:
  29.         //此处是拖动第二栏的时候处理
  30.         break;
  31.     }
  32.   },

参考:微信小程序三级联动之多列选择器

历史上的今天:

关注我们:请关注一下我们的微信公众号:扫描二维码黄良钵博客的公众号,公众号:HLB_Blog
版权声明:本文为原创文章,版权归 黄良钵 所有,欢迎分享本文,转载请保留出处!

发表评论


表情

  1. 善行法脉
    善行法脉 【VIP 1】 @回复

    这个鼠标效果是什么插件呢?还是自己写的代码