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

 更新时间:2019年05月23日 09:55:31   作者:xudejun  
这篇文章主要介绍了微信小程序实现的picker多级联动功能,结合实例形式分析了微信小程序picker组件使用及wx.request后台交互相关操作技巧,需要的朋友可以参考下

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

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

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

相关文章

  • layui 数据表格复选框实现单选功能的例子

    layui 数据表格复选框实现单选功能的例子

    今天小编就为大家分享一篇layui 数据表格复选框实现单选功能的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • JavaScript对象字面量和构造函数原理与用法详解

    JavaScript对象字面量和构造函数原理与用法详解

    这篇文章主要介绍了JavaScript对象字面量和构造函数,结合实例形式分析了JavaScript对象字面量和构造函数相关概念、原理、用法及操作注意事项,需要的朋友可以参考下
    2020-04-04
  • javascript中类的定义方式详解(四种方式)

    javascript中类的定义方式详解(四种方式)

    这篇文章主要介绍了javascript中类的定义方式,结合实例形式较为详细的分析了JavaScript中类的四种定义方式,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-12-12
  • JavaScript仿支付宝密码输入框

    JavaScript仿支付宝密码输入框

    那么今天我就用JavaScript代码来实现这个效果吧,那么首先介绍一下整个的思路,首先我们先将确定输入密码的位数,我的需求是5位,那么就用一个div标签包住5个input标签
    2015-12-12
  • ES6 中可以提升幸福度的小功能

    ES6 中可以提升幸福度的小功能

    这篇文章主要介绍了ES6 中可以提升幸福度的小功能,在量解构赋值的用途,函数的用处等方面给大家介绍,需要的朋友可以参考下
    2018-08-08
  • 基于JavaScript实现年份数字拼图效果

    基于JavaScript实现年份数字拼图效果

    时光荏苒,2022年又要收尾了,公司的年会是不是都安排上了?前几天看到一个年会抽奖系统,功能十分的强大,其中有一个年份数字的拼图效果深深的吸引了哥,决定用JS实现一下该效果,需要的可以参考一下
    2022-12-12
  • 兼容多浏览器的iframe自适应高度(ie8 、谷歌浏览器4.0和 firefox3.5.3)

    兼容多浏览器的iframe自适应高度(ie8 、谷歌浏览器4.0和 firefox3.5.3)

    iframe在ie8 、谷歌浏览器4.0和 firefox3.5.3均成功自适应高度.
    2009-11-11
  • 微信小程序实现YDUI的ScrollTab组件

    微信小程序实现YDUI的ScrollTab组件

    这篇文章主要为大家详细介绍了微信小程序实现YDUI的ScrollTab组件,滚动选项卡效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-02-02
  • 拿捏javascript对象增删改查应用及示例

    拿捏javascript对象增删改查应用及示例

    “撩过”c++的对象,“拿捏”了python的对象,那么今天我们看看javascript中的对象到底是什么,看能不能一次性拿下,不行的话就多来几次,想做“海王”就多物色几门语言的对象,多new几个,最终你会发现都差不多
    2022-03-03
  • JS创建自定义表格具体实现

    JS创建自定义表格具体实现

    创建自定义表格的方法有很多,本文为大家介绍下使用js是如何创建的,感兴趣的朋友可以参考下
    2014-02-02

最新评论