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

2024-07-29 07:43:03

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

<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
  })
 },

效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

微信小程序下拉菜单效果的实例代码

//wcss /**DropDownMenu**/ /*总菜单容器*/ .menu { display: block; height: 28px; position: relative; } /*一级菜单*/ .menu dt { font-size: 15px; float: left; /*hack*/ width: 33%; height: 38px; border-right: 1px solid #d2d2d2; border-bottom: 1px solid #d2d2d2; te
微信小程序 action-sheet 反馈上拉菜单简单实例

微信小程序 action-sheet 反馈上拉菜单简单实例看下实现效果图: js var items = ['item1', 'item2', 'item3', 'item4'] var pageObject = { data: { actionSheetHidden: true, actionSheetItems: items }, actionSheetTap: function (e) { this.setData({ actionSheetHidden: !this.data.acti
微信小程序实现炫酷的弹出式菜单特效

今天给大家带来一个微信小程序的弹出是菜单效果,老规矩先上效果图.(录制的gif动画有点卡,实际真机或是模拟器上很顺畅) 先简单说下思路: 1.首先在屏幕的某个位置放几个悬浮按钮,放几个看你需要的功能 2.点击最上层(wxml中最后一个就是最上层)的的按钮后增加背景遮罩,这个遮罩在我前面自定义modal弹框时有用到 3.分别对按钮做旋转和移动动画和透明度,造成动画差异就是位移的动画距离不同 4.收起的时候回到原来位置并且让透明度变成0就ok了思路说完了,下面开始上实现代码,这里同样也是封装成了组
微信小程序-可移动菜单的实现过程详解

前言我们可以经常看到手机app里有的菜单栏是悬浮在首页的,用户可以拖动和点击菜单栏进行交互,今天代码君就教大家利用小程序的控件,实现一个可移动的菜单,效果图是这样的,要实现这样的效果,需要引出我们今天的重要人物movable-view movable-view属性介绍属性名作用参数值 direction 设置movable-view的移动方向属性值有all.vertical.horizontal.none inertia movable-view是否带有惯性 true/false 默认
微信小程序实现弹出菜单动画

微信小程序动画之弹出菜单,供大家参考,具体内容如下效果图 js: Page({ data: { isPopping: false, animPlus: {}, animCollect: {}, animTranspond: {}, animInput: {}, animCloud:{}, aninWrite:{}, }, //点击弹出 plus: function () { if (this.data.isPopping) { //缩回动画 this.popp(); this.setData(
微信小程序实现单列下拉菜单效果

接下来我想做的是一个下拉菜单用来分类的,但是在网上搜了一下,基本上全都是比较复杂的分类菜单,最简单的也是分三列的下拉菜单,但是并不想要这么复杂的,最后找了一个三列的,改成了单列.也把代码尽可能的简单化了. 实现的效果图: 合并状态: 首先下面是目录结构: 下面是实现的具体代码: .wxml  <view class="product-list">  <view class="choice-b
微信小程序实现跟随菜单效果和循环嵌套加载数据

本文实例为大家分享了微信小程序实现跟随菜单效果.微信小程序循环嵌套加载数据,供大家参考,具体内容如下效果如图: 代码如下: wxml //使用循环嵌套data数据格式写对即可 <scroll-view class="left" scroll-y> <view wx:for="{{left}}" class="leftlist {{index==_click?'yes':''}}" data-i="{{index}}&
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)

本文实例讲述了微信小程序MUI侧滑导航菜单.分享给大家供大家参考,具体如下: 实现的目标MUI的off canvas效果点击列表 -- 右侧展示页面不动,左侧导航滑动 -- 点击右侧遮罩层或者左侧选项 -- 左侧还原,右侧去掉遮罩层实现方案2:左右分上下两层,左侧滑动,右侧不动 WXML <view class="page"> <view class="page-top {{open ? 'page-top-show' : ''}}">
微信小程序基于picker实现级联菜单

本文实例为大家分享了微信小程序实现级联菜单的具体代码,供大家参考,具体内容如下 <view > <picker bindchange="bindPickerChange0" value="{{brandindex}}" range="{{brands}}"> <view class="picker"> 品牌:{{brands[brandindex]}} </view> </
Android中微信小程序开发之弹出菜单

先给大家展示下效果图,具体效果图如下所示: 具体代码如下所示: 1.index.js //index.js //获取应用实例 var app = getApp() Page({ data: { isPopping: false,//是否已经弹出 animationPlus: {},//旋转动画 animationcollect: {},//item位移,透明度 animationTranspond: {},//item位移,透明度 animationInput: {},//item位移,透明度
微信小程序使用picker封装省市区三级联动实例代码

微信小程序使用picker封装省市区三级联动实例目前学习小程序更多的是看看能否二次封装其它组件,利于以后能快速开发各种小程序应用.目前发现picker的selector模式只有一级下拉,那么我们是否可以通过3个picker来实现三级联动模板的形式来引入其它页面中呢?答案是肯定可以的.那么我的思路是这样的: 1.使用template模板语法进行封装,数据从页面传入 2.根据picker组件的语法,range只能是一组中文地区数组,但是我们需要每个地区的唯一码来触发下一级联动数据.这样,我的做法
微信小程序基于slider组件动态修改标签透明度的方法示例

本文实例讲述了微信小程序基于slider组件动态修改标签透明度的方法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml <view class="img" style="opacity:{{imgOpacity}}"></view> <slider min="0" max="1" step="0.1" show-value value=&quo
微信小程序基于腾讯云对象存储的图片上传功能

在使用腾讯云对象存储之前,公司一直使用的是传统的FTP的上传模式,而随着用户量的不断增加,FTP所暴露出来的问题也越来越多,1.传输效率低,上传速度慢.2.时常有上传其他文件来攻击服务器,安全上得不到保障.所以我们在经过慎重考虑觉得使用第三方的云存储服务. 在最开始的时候我们在腾讯云与阿里云中选择,最终我们选择腾讯云,腾讯云在文件上传用时方面的性能比较突出,文件越大表现越好:在下载用时方面表现略优于阿里云:文件删除用时方面总体速度略逊于,但在不同大小文件删除用时上都比较稳定.当然这与我们主要用于
微信小程序基于本地缓存实现点赞功能的方法

本文实例讲述了微信小程序基于本地缓存实现点赞功能的方法.分享给大家供大家参考,具体如下: wxml中的写法注意: 1. 使用wx:if="{{condition}}" wx:else实现图标的切换效果: 2. 为图片绑定点击事件bindtap="toCollect",两个image标签都要绑定! <image wx:if="{{collection}}" src="/images/icon/pic1.png" bind
微信小程序基于canvas渐变实现的彩虹效果示例

本文实例讲述了微信小程序基于canvas渐变实现的彩虹效果.分享给大家供大家参考,具体如下: 微信小程序提供了两种渐变的方式: createLinearGradient(x,y,x1,y1)创建一个线性的渐变. x,y 起点坐标 x1,y1 终点坐标 createCircularGradient(x,y,r)创建一个从圆心开始的渐变. x,y 圆心坐标 r 半径创建了渐变对象之后,必须添加两个或者两个以上的
微信小程序基于高德地图查找位置并显示文字

这篇文章主要介绍了微信小程序基于高德地图查找位置并显示文字,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1.根据经纬度在地图上查找定位 var key = app.globalData.amapKey; var myAmapFun = new amapFile.AMapWX({ key: key }); myAmapFun.getRegeo({ iconPath: "../../assets/marker_checked.png"
微信小程序使用picker实现时间和日期选择框功能【附源码下载】

本文实例讲述了微信小程序使用picker实现时间和日期选择框功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① index.wxml <picker value="{{picker1Value}}" range="{{picker1Range}}" bindchange="normalPickerBindchange"> 当前城市选择:{{picker1Range[picker1Value]}} </pick

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

相关推荐

随机推荐