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

谁借莪１个温暖的怀抱￠ 2022-09-07 09:33 488阅读 0赞

### 文章目录 ###

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

hello,i’m Shendi

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

# 示例视频 #

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

# 官方文档 #

[https://developers.weixin.qq.com/miniprogram/dev/component/picker.html][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  
![在这里插入图片描述][f3733f45a4d54e18bad7363ecb08af57.png]

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

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

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

# 多级联动 #

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

我的思路是动态替换数组，将使用到 bindcolumnchange 事件  
![在这里插入图片描述][7c891007d0514931bce665c2d35e3c4c.png]

## 代码示例 ##

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

[https_developers.weixin.qq.com_miniprogram_dev_component_picker.html]: https://developers.weixin.qq.com/miniprogram/dev/component/picker.html
[f3733f45a4d54e18bad7363ecb08af57.png]: /images/20220829/89bd39806f344ac7a423d51bd328a3ef.png
[7c891007d0514931bce665c2d35e3c4c.png]: /images/20220829/90d94ab3f6a64effbbaaa448f3519e40.png