再使用微信小程序时
发现 当 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题库”
或者扫码查看 或有问题的扫码联系