微信小程序基于picker实现级联菜单


Posted in Javascript onFebruary 15, 2019

本文实例为大家分享了微信小程序实现级联菜单的具体代码,供大家参考,具体内容如下

<view >
 <picker bindchange="bindPickerChange0" value="{{brandindex}}" range="{{brands}}">
  <view class="picker">
   品牌:{{brands[brandindex]}}
  </view>
 </picker>
</view>
 
<view >
 <picker bindchange="bindPickerChange1" value="{{index1}}" range="{{object}}">
  <view class="picker">
   配件类别:{{object[index1]}}
  </view>
 </picker>
</view>
data: {
  brands: [],
  objectArray: [
   {
    brand:"博世",
    id: 0,
    array: ["博世喷油器配件", "博世传感器", "杰克赛尔配件", "博世油泵配件", "博世共轨管配件","博世泵喷嘴"]
   },
   {
    brand: "德尔福",
    id: 1,
    array: ["德尔福喷油器配件", "德尔福传感器", "德尔福油泵", "德尔福共轨管配件", "德尔福滤清器", "德尔福电脑版ECU", "德尔福机油", "德尔福维修部件"]
   },
   {
    brand: "卡特",
    id: 2,
    array: ["卡特传感器", "卡特C7C9泵喷嘴","卡特共轨配件"]
   },
   {
    brand: "康明斯",
    id: 3,
    array: ["西康配件", "东风康明斯","福田康明斯"]
   }
  ],
  object:[],
  brandindex:0,
  index1:0
 },
 onLoad:function(){
  var objectArray = this.data.objectArray
  var brands=[]
  for (var i = 0; i < objectArray.length;i++){
   brands.push(objectArray[i].brand,) 
  }
  this.setData({ brands: brands ,object: objectArray[this.data.brandindex].array})
 },
 bindPickerChange0: function (e) {
  this.setData({ brandindex: e.detail.value, index1:0 })
  var objectArray = this.data.objectArray
  this.setData({ object: objectArray[this.data.brandindex].array})
 },
 bindPickerChange1: function (e) {
  this.setData({
   index1: e.detail.value
  })
 },

效果图:

微信小程序基于picker实现级联菜单

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript面向对象编程
Mar 18 Javascript
JS 退出系统并跳转到登录界面的实现代码
Jun 29 Javascript
Jquery ajax执行顺序 返回自定义错误信息(实例讲解)
Nov 06 Javascript
JS实现定时自动关闭DIV层提示框的方法
May 11 Javascript
理解javascript模块化
Mar 28 Javascript
基于JQuery的$.ajax方法进行异步请求导致页面闪烁的解决办法
May 10 Javascript
JavaScript中的 attribute 和 jQuery中的 attr 方法浅析
Jan 04 Javascript
求js数组的最大值和最小值的四种方法
Mar 03 Javascript
在vue项目中使用sass的配置方法
Mar 20 Javascript
jQuery实现的上传图片本地预览效果简单示例
Mar 29 jQuery
Angular4 组件通讯方法大全(推荐)
Jul 12 Javascript
在react中使用vue的状态管理的方法示例
May 02 Javascript
微信小程序实现多个按钮的颜色状态转换
Feb 15 #Javascript
详解react-refetch的使用小例子
Feb 15 #Javascript
小程序实现多列选择器
Feb 15 #Javascript
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
Feb 15 #jQuery
微信实现自动跳转到用其他浏览器打开指定APP下载
Feb 15 #Javascript
微信小程序实现联动选择器
Feb 15 #Javascript
推荐一个基于Node.js的表单验证库
Feb 15 #Javascript
You might like
php结合表单实现一些简单功能的例子
2011/06/04 PHP
把1316这个数表示成两个数的和,其中一个为13的倍数,另一个是11的倍数,求这两个数。
2011/06/24 PHP
通过PHP修改Linux或Unix口令的方法分享
2012/01/30 PHP
mysql总结之explain
2012/02/27 PHP
php Xdebug的安装与使用详解
2013/06/20 PHP
PHP 动态生成静态HTML页面示例代码
2014/01/15 PHP
FastCGI 进程意外退出造成500错误
2015/07/26 PHP
php实现与python进行socket通信的方法示例
2017/08/30 PHP
php工具型代码之印章抠图
2018/07/18 PHP
基于jQuery的获得各种控件Value的方法
2010/11/19 Javascript
克隆javascript对象的三个方法小结
2011/01/12 Javascript
gridpanel动态加载数据的实例代码
2013/07/18 Javascript
jQuery中prev()方法用法实例
2015/01/08 Javascript
jQuery实现锚点scoll效果实例分析
2015/03/10 Javascript
JavaScript制作淘宝星级评分效果的思路
2020/06/23 Javascript
学习JavaScript设计模式(单例模式)
2015/11/26 Javascript
jQuery插件制作的实例教程
2016/05/16 Javascript
jQuery下拉框的简单应用
2016/06/24 Javascript
Vue组件tree实现树形菜单
2017/04/13 Javascript
bmob js-sdk 在vue中的使用教程
2018/01/21 Javascript
vue实现添加与删除图书功能
2018/10/07 Javascript
手把手教你如何使用nodejs编写cli命令行
2018/11/05 NodeJs
vue实现div拖拽互换位置
2020/07/29 Javascript
python调用OpenCV实现人脸识别功能
2018/05/25 Python
python查看模块安装位置的方法
2018/10/16 Python
python mac下安装虚拟环境的图文教程
2019/04/12 Python
详解Python 多线程 Timer定时器/延迟执行、Event事件
2019/06/27 Python
Python列表与元组的异同详解
2019/07/02 Python
详解python pandas 分组统计的方法
2019/07/30 Python
pandas factorize实现将字符串特征转化为数字特征
2019/12/19 Python
python中提高pip install速度
2020/02/14 Python
django 数据库返回queryset实现封装为字典
2020/05/19 Python
HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题
2020/04/27 HTML / CSS
党员干部三严三实心得体会
2014/10/13 职场文书
贪污受贿检讨书范文
2014/11/19 职场文书
Java后台生成图片的完整步骤
2021/08/04 Java/Android