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

黄良钵

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

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

版权声明: 本站文章除特别声明外，均为本站原创。转载请注明出处，谢谢。

本文地址: https://huangliangbo.com/1471

  • 0人 Love
  • 0人 Haha
  • 0人 Wow
  • 0人 Sad
  • 1人 Angry
picker、多列选择器、小程序、微信开发者

作者简介： 黄良钵

打赏

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

共 2 条评论关于 “微信小程序picker组件中多列选择器的使用”

Loading...