小程序picker组件

官方文档：picker · 小程序

记录最近几个项目中总遇到的情况。

后台返回的数组是酱紫：

0:{id: "8", type_name: "财务", icon: "", sort: "1", time: "2018-07-27 09:38:12", uniacid: "1"}

1:{id: "9", type_name: "营销", icon: "", sort: "2", time: "2018-07-27 14:29:59", uniacid: "1"}

2:{id: "12", type_name: "人力", icon: "", sort: "3", time: "2018-08-20 15:44:38", uniacid: "2"}

3:{id: "13", type_name: "法律", icon: "", sort: "4", time: "2018-08-20 15:44:46", uniacid: "2"}

4:{id: "14", type_name: "政策", icon: "", sort: "5", time: "2018-08-20 15:44:56", uniacid: "2"}

5:{id: "15", type_name: "金融", icon: "", sort: "6", time: "2018-08-24 09:25:41", uniacid: "2"}

6:{id: "11", type_name: "其他", icon: "", sort: "10", time: "2018-08-24 09:25:22", uniacid: "2"}

不知道怎么把它放进picker的选项里。所以，先把type_name拿出来放在一个新的数组name里，

        var array = res.data;//就是上面后台返回的数组
        var name = [];
        var length = array.length;
        for (var i = 0; i < length; i++) {
          name.push(array[i].type_name)
        }
        that.setData({
          array: array,
          name: name
        })

这时候数组array里就是后台返回的完整数组，数组name是每个type_name组成的新数组，即：

name=["财务","营销",  "人力","法律","政策","金融", "金融","其他"]

在wxml页面写的是：

<picker bindchange="bindChanges1" value="{{inde}}" range="{{name}}">
     <view class='activity_prompt'>
            {{(name[inde])?name[inde]:'请选择'}} <text class='choose'>﹀</text>
     </view>
</picker>

效果是这样：

效果图.png

然后再写点击选择之后：

// 需求筛选
  bindChanges1: function (e) {
    var that = this
    // console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      inde: e.detail.value//当前选项的索引值
    })
    var inde = e.detail.value
    var data = that.data.array
    var id = data[inde].id//当前选项对应的id
    that.setData({
      type_id: id
    })
  },

这样子，that.data.type_id就是选中项的id，传给后台就可以啦~
好饿~~~
（PS：如果能有幸帮到哪位大兄弟或者小可爱那最好不过，有写的不对的地方请指正，一定及时改，有错望轻喷，蟹蟹 >﹏<）