微信小程序实现的picker多级联动功能示例

本文实例讲述了微信小程序实现的picker多级联动功能。分享给大家供大家参考，具体如下：

本文实例讲述了微信小程序实现的picker多级联动功能。分享给大家供大家参考，具体如下：

wxml部分：

<picker
 mode="multiSelector"
 bindchange="bindjobcatchange"
 bindcolumnchange="bingjobcatcolumnchange"
 value="{{multiIndex}}"
 range="{{job_cat_list}}"
 range-key="{{'cat_name'}}"
>
 <view class="picker">
 {{fenlei_title}}
 </view>
</picker>

js部分：

Page({
 data: {
 server_url: app.globalData.URL,
 fenlei_title:'分类',
 job_cat_list:[],
 multiIndex: [0,0,0],
 filter:{
 keywords:'',
 job_cat_id:''
 }
 },
 onLoad: function () {
 this.jobcat();
 },
 jobcat: function() {
 var that = this;
 wx.request({
 url: app.globalData.URL + "/xxx/eeee",
 data: {
 x: '',
 y: ''
 },
 header: {
 'content-type': 'application/json' // 默认值
 },
 success: function (res) {
 var data = res.data.data;
 that.setData({
 job_cat_list: [data, data[0]['children'], data[0]['children'][0]['children']]
 });
 }
 });
 },
 bindjobcatchange: function(e){
 this.setData({multiIndex:e.detail.value})
 },
 bingjobcatcolumnchange: function(e){
 var index = this.data.multiIndex;
 const data = {
 job_cat_list: this.data.job_cat_list,
 multiIndex: this.data.multiIndex
 }
 this.data.multiIndex[e.detail.column] = e.detail.value;
 if (e.detail.column==0){
 data.job_cat_list[1] = this.data.job_cat_list[0][index[0]]['children'];
 data.job_cat_list[2] = data.job_cat_list[1][index[1]]['children'];
 }else if(e.detail.column===1){
 data.job_cat_list[2] = data.job_cat_list[1][index[1]]['children'];
 this.data.filter.job_cat_id = data.job_cat_list[2][index[2]]['cat_name'];
 }else if(e.detail.column===2){
 this.data.filter.job_cat_id=data.job_cat_list[2][e.detail.value]['cat_name'];
 }
 this.setData(data)
 }
})

php后台部分：

public function jobcate(){
 $zp_job_catModel = new ZpJobCat();
 $job_cat = $zp_job_catModel->getcateAll();
 $i=0;
 $return_data = [];
 foreach ($job_cat as $key=>$val){
 $return_data[$i] = $val;
 $return_data[$i]['children'] = [];
 if (!empty($val['children'])){
 $c=0;
 foreach ($val['children'] as $k=>$v){
 $return_data[$i]['children'][$c] = $v;
 if (!empty($v['children'])){
 $return_data[$i]['children'][$c]['children'] = [];
 $m=0;
 foreach ($v['children'] as $val2){
 $return_data[$i]['children'][$c]['children'][$m] = $val2;
 $m++;
 }
 }
 $c++;
 }
 }
 $i++;
 }
 $this->_success($return_data);
}

另外，本站在线工具小程序上的天气查询、车牌号归属地查询以及阴历阳历转换等工具就采用了联动查询功能，感兴趣的朋友可以扫描如下小程序码查看：

希望本文所述对大家微信小程序开发有所帮助。