微信小程序实现的picker多级联动功能示例-营山大橙子建站

新闻中心

这里有您想知道的互联网营销解决方案

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

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

成都网站建设哪家好，找创新互联建站！专注于网页设计、网站建设公司、微信开发、微信平台小程序开发、集团成都定制网站等服务项目。核心团队均拥有互联网行业多年经验，服务众多知名企业客户；涵盖的客户类型包括：成都格栅板等众多领域，积累了大量丰富的经验，同时也获得了客户的一致称誉！

wxml部分：


 
  {{fenlei_title}}

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);
}

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

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

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

分享标题：微信小程序实现的picker多级联动功能示例
链接分享：http://scyingshan.cn/article/pedpdp.html

新闻中心

其他资讯