微信小程序基于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 相关文章推荐
js 获取时间间隔实现代码
May 12 Javascript
最新最热最实用的15个jQuery插件汇总
Jul 05 Javascript
jquery淡入淡出效果简单实例
Jan 14 Javascript
javascript随机抽取0-100之间不重复的10个数
Feb 25 Javascript
JavaScript的函数式编程基础指南
Mar 19 Javascript
JS定时器实现数值从0到10来回变化
Dec 09 Javascript
EasyUI学习之Combobox下拉列表(1)
Dec 29 Javascript
vue中如何引入jQuery和Bootstrap
Apr 10 jQuery
如何让你的JS代码更好看易读
Dec 01 Javascript
轻量级JS Cookie插件js-cookie的使用方法
Mar 22 Javascript
Vue 项目分环境打包的方法示例
Aug 03 Javascript
javascript使用substring实现的展开与收缩文字功能示例
Jun 17 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 addslashes 函数详细分析说明
2009/06/23 PHP
php面向对象全攻略 (七) 继承性
2009/09/30 PHP
Look And Say 序列php实现代码
2011/05/22 PHP
PHP中遍历stdclass object的实现代码
2011/06/09 PHP
laravel validate 设置为中文的例子(验证提示为中文)
2019/09/29 PHP
Laravel 手动开关 Eloquent 修改器的操作方法
2019/12/30 PHP
JS 继承实例分析
2008/11/04 Javascript
JAVASCRIPT IE 与 FF中兼容问题小结
2009/02/18 Javascript
javascript 二维数组的实现与应用
2010/03/16 Javascript
javascript string字符串优化问题
2011/07/31 Javascript
查找页面中所有类为test的结点的方法
2014/03/28 Javascript
详谈javascript中的cookie
2015/06/03 Javascript
js实现的简洁网页滑动tab菜单效果代码
2015/08/24 Javascript
自己动手制作基于jQuery的Web页面加载进度条插件
2016/06/03 Javascript
用jQuery实现优酷首页轮播图
2017/01/09 Javascript
使用Xcache缓存器加速PHP网站的配置方法
2017/04/22 Javascript
Angularjs 手写日历的实现代码(不用插件)
2017/10/18 Javascript
js console.log打印对象时属性缺失的解决方法
2019/05/23 Javascript
vue.js+ElementUI实现进度条提示密码强度效果
2020/01/18 Javascript
Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)
2020/01/19 Javascript
[03:14]DOTA2斧王 英雄基础教程
2013/11/26 DOTA
[08:47]DOTA2每周TOP10 精彩击杀集锦vol.6
2014/06/25 DOTA
对于Python中RawString的理解介绍
2016/07/07 Python
Django 内置权限扩展案例详解
2019/03/04 Python
Python turtle绘画象棋棋盘
2019/08/21 Python
python之生成多层json结构的实现
2020/02/27 Python
Python远程方法调用实现过程解析
2020/07/28 Python
python em算法的实现
2020/10/03 Python
纯css3实现走马灯效果
2014/12/26 HTML / CSS
html5+CSS3+JS实现七夕言情功能代码
2017/08/28 HTML / CSS
医院节能减排方案
2014/06/13 职场文书
实习指导老师意见
2015/06/04 职场文书
鸦片战争观后感
2015/06/09 职场文书
初中班级口号霸气押韵
2015/12/24 职场文书
JDBC连接的六步实例代码(与mysql连接)
2021/05/12 MySQL
使用canvas对video视频某一刻截图功能
2021/09/25 HTML / CSS