微信小程序picker 双列案例

最新推荐文章于 2025-03-10 15:49:59 发布

原创最新推荐文章于 2025-03-10 15:49:59 发布 · 519 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #小程序 #javascript

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

9 篇文章

订阅专栏

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

直接上代码：

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