微信小程序基于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 实现父窗口引用弹出窗口的值的脚本
Aug 07 Javascript
关于取不到由location.href提交而来的上级页面地址的解决办法
Jul 30 Javascript
两个Javascript小tip资料
Nov 23 Javascript
一些实用的jQuery代码片段收集
Jul 12 Javascript
JavaScript中的View-Model使用介绍
Aug 11 Javascript
JS 屏蔽按键效果与改变按键效果的示例代码
Dec 24 Javascript
js实现不重复导入的方法
Mar 02 Javascript
JS简单测试循环运行时间的方法
Sep 04 Javascript
JavaScript三种绑定事件方式及相互之间的区别分析
Jan 10 Javascript
js+html5实现侧滑页面效果
Jul 15 Javascript
Angular6新特性之Angular Material
Dec 28 Javascript
Vue+Bootstrap实现简易学生管理系统
Feb 09 Vue.js
微信小程序实现多个按钮的颜色状态转换
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
SSI指令
2006/11/25 PHP
PHP中的cookie
2006/11/26 PHP
php连接mssql数据库的几种方法
2013/02/21 PHP
php简单实现MVC
2015/02/05 PHP
iis6手工创建网站后无法运行php脚本的解决方法
2017/06/08 PHP
使用Modello编写JavaScript类
2006/12/22 Javascript
js 优化次数过多的循环 考虑到性能问题
2011/03/05 Javascript
关于锚点跳转及jQuery下相关操作与插件
2012/10/01 Javascript
javascript函数以及基础写法100多条实用整理
2013/01/13 Javascript
简单易用的倒计时js代码
2014/08/04 Javascript
jQuery源码解读之addClass()方法分析
2015/02/20 Javascript
jquery悬浮提示框完整实例
2016/01/13 Javascript
JS根据浏览器窗口大小实时动态改变网页文字大小的方法
2016/02/25 Javascript
JS中作用域和变量提升(hoisting)的深入理解
2016/10/31 Javascript
JS作用域深度解析
2016/12/29 Javascript
使用jQuery ajaxupload插件实现无刷新上传文件
2017/04/23 jQuery
解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题
2017/11/07 Javascript
vue将时间戳转换成自定义时间格式的方法
2018/03/02 Javascript
vue实现员工信息录入功能
2020/06/11 Javascript
[02:06]DOTA2肉山黑名单魔法终结者 敌法师中文配音鉴赏
2013/06/17 DOTA
python检测远程端口是否打开的方法
2015/03/14 Python
python链接Oracle数据库的方法
2015/06/28 Python
Python中字符串的处理技巧分享
2016/09/17 Python
Python RabbitMQ消息队列实现rpc
2018/05/30 Python
Python 使用指定的网卡发送HTTP请求的实例
2019/08/21 Python
python 解决flask uwsgi 获取不到全局变量的问题
2019/12/22 Python
python模拟点击网页按钮实现方法
2020/02/25 Python
Django windows使用Apache实现部署流程解析
2020/10/12 Python
英国礼品和生活方式品牌:Treat Republic
2020/11/21 全球购物
大学生实习鉴定评语
2014/04/25 职场文书
工作岗位说明书模板
2014/05/09 职场文书
2015教师个人工作总结范文
2015/03/31 职场文书
公司规章制度范本
2015/08/03 职场文书
2019旅游导游工作总结
2019/06/27 职场文书
测量JavaScript函数的性能各种方式对比
2021/04/27 Javascript
Django drf请求模块源码解析
2021/06/08 Python