实现微信小程序picker 省市区自定义数据支持三级联动

悠悠 2022-10-27 05:23 585阅读 0赞

再使用微信小程序时

发现 当 mode="region"   时数据 选择的省市区的数据不支持后台返回的数据

以下实现后台返回数据操作

**先设置HTML**

**name 字段名字要替换掉**

<view class=" h-100 b-b l-h-100">
            <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" range-key="name" value="{
       {multiIndex}}" range="{
       {multiArray}}">
              <view class="picker flex-r">
                <view class="bold"><text class="c-f00">*</text>地区</view> <text> {
       {multiArray[0][multiIndex[0]].name}}{
       {multiArray[1][multiIndex[1]].name}}{
       {multiArray[2][multiIndex[2]].name}} </text>
              </view>
            </picker>
          </view>

**在data中**

data:{
    
          multiArray: [],//地区
          multiIndex: [0, 0, 0],
          type:0,
    }

**首次进来查询省市区数据**

// POST 开发完成 
      // 获取省市区
       首次调用 type传0
      code 为查询下级的id  code 为空时则查询省
        
      getcitycode(type，code){
        var self=this
        var {multiArray,multiIndex,code,street}=this.data
        app.ajax({
          code,
          url: '/shenshiqu',
        }, function (result) {
          multiArray[type]=result.data.data
          if(type<2)self.getcitycode(type+1,result.data.data[index].taobaoid)
        })
       
      },

**当滚动省获或者市时 更新 并联动**

// 选择省市区
      bindMultiPickerChange: function (e) {
        console.log('picker发送选择改变，携带值为', e.detail.value)
        this.setData({multiIndex: e.detail.value})
      },
    
      
      // 选择省市区
      bindMultiPickerColumnChange: function (e) {
        console.log('修改的列为', e.detail.column, '，值为', e.detail.value);
        var data = {
          multiArray: this.data.multiArray,
          multiIndex: this.data.multiIndex
        };
    
        data.multiIndex[e.detail.column] = e.detail.value;
        switch (e.detail.column) {
          case 0:
            console.log(data.multiArray[e.detail.column][e.detail.value].taobaoid)
            this.getcitycode(1,data.multiArray[e.detail.column][e.detail.value].taobaoid)
            break;
          case 1:
              console.log(data.multiArray[e.detail.column][e.detail.value].taobaoid)
              this.getcitycode(2,data.multiArray[e.detail.column][e.detail.value].taobaoid)
              break;
        }
        this.setData(data);
      },

喜欢的可以加人前端面试题库，方便使用  微信搜索 “MST题库”

或者扫码查看  或有问题的扫码联系

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjk4MTU2MA_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjk4MTU2MA_size_16_color_FFFFFF_t_70]: /images/20221024/af64f144e90740b6af93bb69d14c20ad.png