微信小程序picker 双列案例

少杰（）

于 2022-07-26 10:06:04 发布

阅读量491

点赞数

分类专栏：微信小程序文章标签：微信小程序小程序 javascript

本文链接：https://blog.youkuaiyun.com/oldcoder2000/article/details/125988885

版权

微信小程序专栏收录该内容

9 篇文章

订阅专栏

这篇博客展示了如何在微信小程序中使用`picker`组件实现多列联动选择的效果。通过`bindchange`和`bindcolumnchange`事件处理函数，动态更新不同列的选择项，从而实现联动选择的功能。示例代码包括了`wxml`页面结构和对应的`js`逻辑，涉及数据绑定和事件响应，是前端开发中关于微信小程序交互设计的一个实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

直接上代码：

wxml页面

<picker mode="multiSelector" range="{{ multiItems }}" bindchange="handleMulti" bindcolumnchange="handleColumn">
  <view>点击选择：{{ multiItems[0][multiIndex[0]] }} {{ multiItems[1][multiIndex[1]] }}</view>
</picker>

js逻辑页面

// pages/pikcer/picker.js
Page({

  /**
   * 页面的初始数据
   */
  data: {   
    multiItems: [['飞禽', '走兽'], ['鹰', '鸽子', '麻雀', '鹦鹉']],
    multiIndex: [0, 0],
    arrColumn0: ['鹰', '鸽子', '麻雀', '鹦鹉'],
    arrColumn1: ['兔子', '狮子', '猎狗']
},
  handleMulti(e){
    this.setData({
      multiIndex : e.detail.value
    })
  },
  handleColumn(e){
    var obj = e.detail
    var multiArray = this.data.multiItems
    if (obj.column == 0 && obj.value == 0) {
     multiArray[1] = this.data.arrColumn0
    }
    if (obj.column == 0 && obj.value == 1) {
     multiArray[1] = this.data.arrColumn1
    }
    this.setData({
     multiItems: multiArray
    })
  }
})