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

微信小程序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.   },

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

黄良钵

博客站长,前端开发工程师

2 条评论

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

发表评论

电子邮件地址不会被公开。 必填项已用*标注

微信扫一扫

微信扫一扫

微信扫一扫,分享到朋友圈

微信小程序picker组件中多列选择器的使用
返回顶部
网站稳定运行 : {{ diffYears }}年 零 {{ diffDays }}天 {{ diffHours }} 小时 {{ diffMinutes }} 分钟 {{ diffSeconds }} 秒

显示

忘记密码?

显示

显示

获取验证码

Close