微信小程序Picker自定义数据多级联动

Posted 2022-01-04 HackShendi

文章目录

• 示例视频
• 官方文档
• Picker使用
• 多级picker
• 多级联动
• • 代码示例

hello,i’m Shendi

最近在整微信小程序，在 picker 这个地方卡了很久，这里总结一下

示例视频

小程序picker多级联动示例视频

官方文档

https://developers.weixin.qq.com/miniprogram/dev/component/picker.html

Picker使用

如果只需要弹出选择一个条目，实现起来非常简单

在 wxml 文件下加入如下代码

<picker bindchange='change' value="index" range="array">
	<view value='array[index]'>array[index]</view>
</picker>

其中 bindchange 为我们点击确定后执行的函数，value为选择条目的下标，初始为0，range为选择条目的数据体

在 js 中代码如下

Page(
  data: 
	/** 条目下标 */
    index : 0,
    /** 条目数据,是一个数组 */
    array : ["条目1","条目2"]
  ,
  /** 确定了条目所调用的函数 */
  change: function (e) 
  	// 其中 e.detail.value 为选中的条目所对应的下标,这里赋值,picker将会自行更新内容
    this.setData( index : e.detail.value );
  ,

多级picker

实现多级也非常简单
首先得给picker加一个mode

例如二级联动
我们传递的数组改成数组内有两个数组即可，下标也为数组

index : [0,0],
array : [["条目1","条目2"],["二级条目内容1"]]

三级联动则三个数组，n级则n数组

多级联动

有时需求是一级条目有对应的二级条目…即根据上一级自动替换下一级内容（上面视频演示的效果）

我的思路是动态替换数组，将使用到 bindcolumnchange 事件

代码示例

wxml

<picker class='title_content' mode="multiSelector" bindchange='majorClassesChange' bindcolumnchange='majorCLassesColumnChange' value="majorClassesIndex" range="majorClasses">
  <view style="display: inline-block">
    <text style="color: #757575">专业班级</text>
    <view style="margin-top: 12rpx">
      <text value='majorClasses[0][majorClassesIndex[0]]'>majorClasses[0][majorClassesIndex[0]]</text>
      <text style='margin-left:12rpx;' value='majorClasses[1][majorClassesIndex[1]]'>majorClasses[1][majorClassesIndex[1]]</text>
    </view>
  </view>
</picker>

js部分

Page(
  data: 
  	// 专业班级
    majorClassesIndex : [0,0],
    majorClasses: [["专业1", "专业2"], []],
    // 专业与班级对应表,用于动态修改
    classes : [
      
        major : "专业1",
        classes : [
          "1班",
          "2班",
          "3班"
        ]
      ,
      
        major : "专业2",
        classes : [
          "4班",
          "5班"
        ]
      
    ],
  ,
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) 
    var that = this;

    // 初始化专业班级的第一个数据
    var majorClasses = this.data.majorClasses;
    majorClasses[1] = this.data.classes[0].classes;
    this.setData(
      majorClasses : majorClasses
    );
  ,
  /** 专业班级列切换 */
  majorCLassesColumnChange : function (e) 
    // 专业列修改则更改绑定数据的对应班级,实现联动效果
    if (e.detail.column == 0) 
      var major = this.data.majorClasses[0][e.detail.value];
      var classes = this.data.classes;
      // 这里可以自行更改,例如通过下表来获取
      // 循环获取指定专业对应的班级列表
      for (var i = 0; i < classes.length; i++) 
        if (classes[i].major == major) 
          var majorClasses = this.data.majorClasses;
          majorClasses[1] = classes[i].classes;
          var majorClassesIndex = this.data.majorClassesIndex;
          majorClassesIndex[0] = e.detail.value;
          majorClassesIndex[1] = 0;
          // 只能用setData修改数据
          this.setData(
            majorClasses : majorClasses,
            majorClassesIndex : majorClassesIndex
          );
          break;
        
      
    
  ,
  /** 用户修改了专业班级校 */
  majorClassesChange : function (e) 
    this.setData( majorClassesIndex:e.detail.value );
  ,