小程序的picker事件,当数据源不是一维数组而是object的时候获取数据

一、小程序picker使用

注意:

小程序的picker,更好的处理的select事件以及应对深层次的多级联动,对于单选的picker,最简单的就是选择数据和要展示的一 一对象,这样我们可以直接使用数据。

1展示的数据picker的数据图如下:
小程序的picker事件,当数据源不是一维数组而是object的时候获取数据_第1张图片

二、使用流程代码如下

1,在wxml中使用range-key可以更改为选项列表展示的数据,range-key是什么,在显示的数据这里就得写什么,我在range-key是“storeName”,所以StoreList[index].StoreName是我们选中以后需要展示的数据,代码如下:

 
        
            选择门店:{{StoreList[index].StoreName}}
        
    

2,wxml代码中StoreList接口返回的门店列表object对象,数据如下:
小程序的picker事件,当数据源不是一维数组而是object的时候获取数据_第2张图片

注意:要想获取到以上对象中的其中的某一条数据,我们最先想到的就是遍历,循环,可是这样一来会多出很多无用的标签。还会想到用foreach数据提炼出来,改成一维数组。但是对象中的数据ID没法对应了。

3,选中后的展示,和数据源(object对象)通过index来对应起来,对应的js如下:

bindPickerChange: function (e) {
        let that = this
        console.log('picker发送选择改变,携带值为', e.detail.value)
        this.setData({
            index: e.detail.value,
            //获取门店选中后的storeid
            StoreID:that.data.StoreList[e.detail.value].StoreID
        })
        //选择门店给StoreID重新赋值
        wx.setStorageSync('StoreID',that.data.StoreID)
        console.log('选择则门店的StoreID',that.data.StoreID)
    },

三、成功示例图如下

小程序的picker事件,当数据源不是一维数组而是object的时候获取数据_第3张图片

你可能感兴趣的:(小程序)