cms
当前位置:首页->常见问题
微信小程序picker组件使用自定义json数组的绑定问题
  • 作者:本站
  • 日期:2022-10-27
  • 出处:totcms
  • 点击:33

微信小程序picker组件使用自定义json数组的绑定问题

    在微信小程序中,当用户用到下拉选择菜单时,我们经常使用picker,不过picker有一个小问题,就是获取当前选中的值是数组的索引,同时令某一行选中,也是通过索引号传递实现的。目前我们经常使用的是数据库中的id来保存数据。所以需要在这里将微信picker组件中的value(数组索引号)换成我们真实数据中的id才好。

    如下图我们表中“工种”这个数组,其实是包含idtitle属性的。如果用户切换选择时,微信picker传递过来的是当前项在数组中的索引号,这里我们需要通过索引号查询到此元素的id也就是:this.data.workArr[e.detail.value].id这个代码实现。

    然后为了保持当前项被选中,我们传递给picker的value仍然需要是索引号,所以我们定义了一个字段workInx来保存每次变化后的索引号:

在changeWork方法保存workInx 为当前索引的值。在xml布局文件中value="{{ workInx }}"代码实现对当前索引号位置的选中。

一、定义data数据

 

data: {   

   //用于picker展示的数据数组 

    workArr: [{

         "id": 1,

         "title": "电工"

     },{

         "id": 2,

         "title": "瓦工"

     }, {

         "id": 3,

         "title": "油工"

     }

    ],

    workId:0,//真实id(当前选择的工种id,用于传递到后台)

    workInx:0//picker当前选中的索引位置

  },

 

//picker切换选择的处理方法

changeWork: function (e) {

    console.log(e);

    this.setData({

      ' workId ': this.data.workArr[e.detail.value].id,

      'workInx': e.detail.value

    })

  },

 

 

前端xml

 

<view class="centerPage-info-item">

      <label>工种</label>

      <label class="ico-moon icon-rightarrow"></label>

      <picker mode="selector" class="centerPage" bindchange="changeWork" value="{{ workInx }}" range="{{ workArr }}" range-key="title">

        <view class="picker">{{ workArr[workInx].title }}</view>

      </picker>

    </view>