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

Posted 2021-09-09 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 });
  },