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


Posted in Javascript onMay 23, 2019

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

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

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

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

Javascript 相关文章推荐
基于Jquery的表格隔行换色,移动换色,点击换色插件
Dec 22 Javascript
jQuery焦点图切换特效插件封装实例
Aug 18 Javascript
javascript数组克隆简单实现方法
Dec 16 Javascript
更高效的使用JQuery 这里总结了8个小技巧
Apr 13 Javascript
AngularJS中的JSONP实例解析
Dec 01 Javascript
js实现网页的两个input标签内的数值加减(示例代码)
Aug 15 Javascript
JQuery 获取多个select标签option的text内容(实例)
Sep 07 jQuery
webpack配置导致字体图标无法显示的解决方法
Mar 06 Javascript
微信小程序时间选择插件使用详解
Dec 28 Javascript
Vue项目实现简单的权限控制管理功能
Jul 17 Javascript
vue页面切换项目实现转场动画的方法
Nov 12 Javascript
WebRTC记录音视频流(web技术分享)
Feb 24 Javascript
js console.log打印对象时属性缺失的解决方法
May 23 #Javascript
Node.js+ELK日志规范的实现
May 23 #Javascript
jquery+php后台实现省市区联动功能示例
May 23 #jQuery
js尾调用优化的实现
May 23 #Javascript
浅谈redux, koa, express 中间件实现对比解析
May 23 #Javascript
Express结合Webpack的全栈自动刷新
May 23 #Javascript
ajax跨域访问遇到的问题及解决方案
May 23 #Javascript
You might like
PHP性能优化 产生高度优化代码
2011/07/22 PHP
深入分析php中接口与抽象类的区别
2013/06/08 PHP
PHP魔术方法之__call与__callStatic使用方法
2017/07/23 PHP
Win10 下安装配置IIS + MySQL + nginx + php7.1.7
2017/08/04 PHP
php反序列化长度变化尾部字符串逃逸(0CTF-2016-piapiapia)
2020/02/15 PHP
php使用gearman进行任务分发操作实例详解
2020/02/26 PHP
javascript 数组排序函数
2009/08/20 Javascript
如何用ajax来创建一个XMLHttpRequest对象
2012/12/10 Javascript
纯js分页代码(简洁实用)
2013/11/05 Javascript
Jquery实现自定义窗口随意的拖拽
2014/03/12 Javascript
从零开始学习Node.js系列教程之基于connect和express框架的多页面实现数学运算示例
2017/04/13 Javascript
jQuery 实现双击编辑表格功能
2017/06/19 jQuery
在vue-cli脚手架中配置一个vue-router前端路由
2017/07/03 Javascript
详解Vue-cli代理解决跨域问题
2017/09/27 Javascript
JS实现的简单表单验证功能示例
2017/10/13 Javascript
vue2.x集成百度UEditor富文本编辑器的方法
2018/09/21 Javascript
vue解决花括号数据绑定不成功的问题
2019/10/30 Javascript
uniapp实现可以左右滑动导航栏
2020/10/21 Javascript
vue实现树状表格效果
2020/12/29 Vue.js
[14:20]刀塔大凶女神互压各路奇葩屌丝
2014/05/16 DOTA
[04:50]2019DOTA2高校联赛秋季赛四强集锦
2019/12/27 DOTA
Python入门篇之条件、循环
2014/10/17 Python
Python中的一些陷阱与技巧小结
2015/07/10 Python
Django csrf 验证问题的实现
2018/10/09 Python
使用Matplotlib 绘制精美的数学图形例子
2019/12/13 Python
Python计算IV值的示例讲解
2020/02/28 Python
Python 如何对文件目录操作
2020/07/10 Python
python实现双人五子棋(终端版)
2020/12/30 Python
处理textarea中的换行和空格
2019/12/12 HTML / CSS
德国自行车商店:Tretwerk
2019/06/21 全球购物
利用指针变量实现队列的入队操作
2012/04/07 面试题
美术教学感言
2014/02/22 职场文书
党风廉政承诺书
2014/03/27 职场文书
2015年营销工作总结范文
2015/04/23 职场文书
python 实现的截屏工具
2021/05/08 Python
Python MNIST手写体识别详解与试练
2021/11/07 Python