微信小程序picker自定义地址字典，取值id

最新推荐文章于 2023-08-23 10:23:51 发布

周18

最新推荐文章于 2023-08-23 10:23:51 发布

阅读量1.6k

点赞数

分类专栏：微信小程序

本文链接：https://blog.csdn.net/qq_35736512/article/details/107949706

版权

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

8 篇文章 0 订阅

订阅专栏

后台非要搞点个什么地址字典，让我传字典区域的id给他
在这里插入图片描述

字典数据如下：
在这里插入图片描述

		<picker mode="multiSelector" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{areaCode}}" bindchange="bindMultiPickerChange">
			<view class="picker">
				{{areaCode[0][multiIndex[0]]}}，{{areaCode[1][multiIndex[1]]}}，{{areaCode[2][multiIndex[2]]}}
			</view>
		</picker>

data: {
    multiIndex: [0, 0, 0], // 选中值的索引
    areaCode: [], // 给picker展示的数据
    cityJson: [], // 字典原始数据
    areaID: null, // 最终选中的区域ID
    }
      onShow: function () {
      // 执行接口 获取字典，放本地也行，看自己情况
    this.getPca()
  },
   // 获取地址编码字典
   getPca () {
    var that = this
    app.request({
      url: '/api/Index/getPca',
      method: "get",
      success: function (res) {
        if (res.status == 1) {
        // 以下对areaCode的操作，是为了数据最开始的默认值，取的是数据里[0]省.[0]市.[0]区
        // 把原始数据赋值给cityJson，后续操作picker的时候需要用cityJson重新给areaCode赋值
          var areaCode = that.data.areaCode
          areaCode[0] = res.res.map(function(v){return v.provinceName});
          areaCode[1] = res.res[that.data.multiIndex[1]].cities.map(function(v){return v.cityName});
          areaCode[2] = res.res[that.data.multiIndex[1]].cities[that.data.multiIndex[2]].areas.map(function(v){return v.areaName})
          that.setData({
            areaCode: areaCode,
            cityJson: res.res
          })
        } else {
          wx.showToast({
            title: res.msg,
            icon: 'none'
          })
        }
      }
    })
  },
    // 操作picker
  bindMultiPickerChange: function (e){
    this.setData({
      multiIndex: e.detail.value
    })
  },
      // 列变化
  bindMultiPickerColumnChange: function(e) {
    var that = this
    var cityJson = that.data.cityJson
    var areaCode = that.data.areaCode
     // 列的值改变时触发
     // 监听用户操作，改变multiIndex的值
     var multiIndex =  that.data.multiIndex
     multiIndex[e.detail.column] = e.detail.value;
     that.setData({
      multiIndex: multiIndex
     },()=>{
       // areaID 这里就是取到了对象的id了，对原始数据进行索引的取值
       var areaID = cityJson[multiIndex[0]].cities[multiIndex[1]].areas[multiIndex[2]].areaID
       that.setData({
          areaID: areaID
       })
     })

     // areaCode[0]的值是不会随用户操作变更的，因此不需要改变  
     // areaCode[1]的值是由 mulIndex[0]的值决定的 用原始数据重新筛选替换到开始的 areaCode
     areaCode.splice(1,1,cityJson[that.data.multiIndex[0]].cities.map(function(v){return v.cityName}));
     // areaCode[2]的值是由 muIndex[1]的值决定的 
    areaCode.splice(2,1,cityJson[that.data.multiIndex[0]].cities[that.data.multiIndex[1]].areas.map(function(v){return v.areaName}))
     this.setData({
      areaCode: areaCode
     })
},