首页 > 课堂 > 小程序 > 正文

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

2020-03-21 15:55:27
字体:
来源:转载
供稿:网友

本文实例讲述了微信小程序实现的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);}

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


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表