微信小程序基于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实现权限树的更新权限时的全选全消功能
Feb 17 Javascript
javascript对象之内置对象Math使用方法
Apr 16 Javascript
checkbox设置复选框的只读效果不让用户勾选
Aug 12 Javascript
基于jquery的禁用右键、文本选择功能、复制按键的实现代码
Aug 27 Javascript
AngularJS入门教程(零):引导程序
Dec 06 Javascript
基于jquery fly插件实现加入购物车抛物线动画效果
Apr 05 Javascript
使用jQuery Mobile框架开发移动端Web App的入门教程
May 17 Javascript
解读Bootstrap v4 sass设计
May 29 Javascript
javascript 分号总结及详细介绍
Sep 24 Javascript
获取JavaScript异步函数的返回值
Dec 21 Javascript
JS模拟实现ECMAScript5新增的数组方法
Mar 20 Javascript
layui富文本编辑器前端无法取值的解决方法
Sep 18 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
web站点获取用户IP的安全方法 HTTP_X_FORWARDED_FOR检验
2013/06/01 PHP
Yii框架创建cronjob定时任务的方法分析
2017/05/23 PHP
PHP基于ORM方式操作MySQL数据库实例
2017/06/21 PHP
Bootstrap+PHP实现多图上传功能实例详解
2018/04/08 PHP
laravel使用数据库测试注意事项
2020/04/10 PHP
跟随鼠标旋转的文字
2006/11/30 Javascript
json格式化/压缩工具 Chrome插件扩展版
2010/05/25 Javascript
js给onclick事件赋值,动态传参数实例解说
2013/03/28 Javascript
js/jquery解析json和数组格式的方法详解
2014/01/09 Javascript
JS实现左右拖动改变内容显示区域大小的方法
2015/10/13 Javascript
微信小程序 定义全局数据、函数复用、模版等详细介绍
2016/10/27 Javascript
Bootstrap 轮播(Carousel)插件
2016/12/26 Javascript
js的函数的按值传递参数(实例讲解)
2017/11/16 Javascript
Javascript删除数组里的某个元素
2019/02/28 Javascript
[04:46]2018年度玩家喜爱的电竞媒体-完美盛典
2018/12/16 DOTA
Python常用内置函数总结
2015/02/08 Python
python面向对象_详谈类的继承与方法的重载
2017/06/07 Python
python+mysql实现学生信息查询系统
2019/02/21 Python
python Django 创建应用过程图示详解
2019/07/29 Python
详解Django admin高级用法
2019/11/06 Python
Python Merge函数原理及用法解析
2020/09/16 Python
python中pickle模块浅析
2020/12/29 Python
html标签之Object和EMBED标签详解
2013/07/04 HTML / CSS
怎样实现H5+CSS3手指滑动切换图片的示例代码
2019/05/05 HTML / CSS
莱德杯高尔夫欧洲官方商店:Ryder Cup Shop
2019/08/14 全球购物
诚信考试倡议书
2014/04/15 职场文书
经理任命书模板
2014/06/06 职场文书
关于十八大的演讲稿
2014/09/15 职场文书
群众路线党员自我评议范文2014
2014/09/24 职场文书
老员工辞职信范文
2015/05/12 职场文书
小学生家长意见
2015/06/03 职场文书
八月一日观后感
2015/06/10 职场文书
2015年暑期见闻
2015/07/14 职场文书
2016年共产党员个人承诺书
2016/03/24 职场文书
2016年学校爱国卫生月活动总结
2016/04/06 职场文书
HTML5简单实现添加背景音乐的几种方法
2021/05/12 HTML / CSS