微信小程序實現的picker多級聯動功能示例

2019-11-19 11:29:15

字體：大中小

來源：轉載

供稿：網友

本文實例講述了微信小程序實現的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);}

另外，本站在線工具小程序上的天氣查詢、車牌號歸屬地查詢以及陰歷陽歷轉換等工具就采用了聯動查詢功能，感興趣的朋友可以掃描如下小程序碼查看：