uni-app 微信小程序 picker 三级联动
之前做过一个picker的三级联动功能,这里分享代码给大家
具体代码:
// An highlighted block
<template>
<view>
<picker mode="multiSelector" @change="bindMultiPickerChange" @columnchange="bindMultiPickerColumnChange" :value="multiIndex" :range="multiArray">
<view class="picker" style="display: flex;justify-content:space-around;align-items:center;width: 100%;flex: 1">
<view class="energy">
{{ areaname }}
<uni-icons :size="40" class="uni-icon-wrapper" color="#e0e0e0" type="arrowdown" />
</view>
<view style="background-color: #50a0d1;height: 50rpx;width: 1px;opacity: 0.5"></view>
<view class="energy">
{{ buildingname }}
<uni-icons :size="40" class="uni-icon-wrapper" color="#e0e0e0" type="arrowdown" />
</view>
<view style="background-color: #50a0d1;height: 50rpx;width: 1px;opacity: 0.5"></view>
<view class="energy">
{{ floorname }}
<uni-icons :size="40" class="uni-icon-wrapper" color="#e0e0e0" type="arrowdown" />
</view>
</view>
</picker>
</view>
</template> <script>
import Vue from 'vue';
export default {
data() {
return {
multiArray: [['1', '2', '3', '4', '5', '6', '7'], ['1舍', '2舍', '3舍', '4舍'], ['111楼', '112楼', '113楼', '114楼']],
multiIndex: [0, 0, 0],
tabindex: 0,
ydindex: 0,
firstid: '0',
secondid: '0',
thirdid: '0',
areaname: '1',
dengswitchvalue: '',
ktswitchvalue: '',
buildingname: '1舍',
floorname: '111楼',
nowitem: '1-1舍-111楼',
column1data: [
//每个院部的楼栋
['11舍', '12舍', '13舍', '14舍'],
// ['21舍', '22舍', '23舍', '24舍'],
['21舍'],
// ['31舍', '32舍', '33舍', '34舍'],
['31舍', '32舍'],
['41舍', '42舍', '43舍', '44舍'],
['51舍', '52舍', '53舍', '54舍'],
['61舍', '62舍', '63舍', '64舍'],
['71舍', '72舍', '73舍', '74舍']
],
hangdata: [
//每一栋包含楼层
[['111楼', '112楼', '113楼', '114楼'], ['121楼', '122楼', '123楼'], ['131楼', '132楼', '133楼', '134楼'], ['141楼', '142楼', '143楼', '144楼']],
// [['211楼', '212楼', '213楼', '214楼'], ['221楼', '222楼', '223楼', '224楼'], ['231楼', '232楼', '233楼', '234楼'], ['241楼', '242楼', '243楼', '244楼']],
[['211楼', '212楼', '213楼', '214楼']],
// [['311楼', '312楼', '313楼', '314楼'], ['321楼', '322楼', '323楼', '324楼'], ['331楼', '332楼', '333楼', '334楼'], ['341楼', '342楼', '343楼', '344楼']],
[['311楼', '312楼', '313楼', '314楼'], ['321楼', '322楼', '323楼']],
[['411楼', '412楼', '413楼', '414楼'], ['421楼', '422楼', '423楼', '424楼'], ['431楼', '432楼', '433楼', '434楼'], ['441楼', '442楼', '443楼', '444楼']],
[['511楼', '512楼', '513楼', '514楼'], ['521楼', '522楼', '523楼'], ['531楼', '532楼', '533楼', '534楼'], ['541楼', '542楼', '543楼', '544楼']],
[['611楼', '612楼', '613楼', '614楼'], ['621楼', '622楼', '623楼', '624楼'], ['631楼', '632楼', '633楼', '634楼'], ['641楼', '642楼', '643楼', '654楼']],
[['711楼', '712楼'], ['721楼', '722楼', '723楼'], ['731楼', '732楼', '733楼', '734楼'], ['741楼', '742楼', '743楼', '744楼']]
]
};
},
methods: {
bindMultiPickerChange(e) {
this.multiIndex = e.detail.value;
this.areaname = this.multiArray[0][e.detail.value[0]];
this.buildingname = this.multiArray[1][e.detail.value[1]];
this.floorname = this.multiArray[2][e.detail.value[2]]; this.nowitem = this.multiArray[0][e.detail.value[0]] + '-' + this.multiArray[1][e.detail.value[1]] + '-' + this.multiArray[2][e.detail.value[2]];
console.log('选择了:' + this.nowitem);
},
bindMultiPickerColumnChange(e) {
switch (e.detail.column) {
case 0:
this.firstid = e.detail.value;
if (typeof this.hangdata[this.firstid][this.secondid] == 'undefined') {
this.secondid = 0; //当第二列数据没有上一个second列的情况
}
switch (e.detail.value) {
case this.firstid:
Vue.set(this.multiArray, 1, this.column1data[this.firstid]);
Vue.set(this.multiArray, 2, this.hangdata[this.firstid][this.secondid]); //为了对应第三列关系
break;
default:
break;
}
break;
case 1:
this.secondid = e.detail.value;
if (typeof this.hangdata[this.firstid][this.secondid][this.thirdid] == 'undefined') {
this.thirdid = 0; //当第三列数据没有上一个列的情况
}
switch (this.firstid) {
case this.firstid:
switch (this.secondid) {
case this.secondid:
Vue.set(this.multiArray, 2, this.hangdata[this.firstid][this.secondid]);
break;
default:
break;
}
break;
default:
break;
}
case 2:
this.thirdid = e.detail.value;
break;
default:
break;
}
}
}
};
</script> <style lang="less"></style>
uni-app 微信小程序 picker 三级联动的更多相关文章
- 微信小程序---自定义三级联动
在开发的很多电商类型的项目中,免不了会遇到三级联动选择地址信息,如果单纯的使用文本框给用户选择,用户体检可能就会差很多.今天我给大家整理了关于小程序开发利用picker-view组件和animatio ...
- 微信小程序 实现三级联动-省市区
github项目地址 https://github.com/z1511676208/chooseAddr 序:项目中需要用到三级联动,自己试着写了下,也查了一些资料,现在把这个记录一下,里面地区数 ...
- NO--14 微信小程序,左右联动二
上一篇讲解了左=>右联动,那个还比较简单,本篇写剩下比较核心的部分,也是本次开发过程中遇到最难的部分,右=>左联动,先简单看一下演示 右左联动.gif 一.关键技术: (1) 小程序 ...
- 微信小程序picker组件两列关联使用方式
在使用微信小程序picker组件时候,可以设置属性 mode = multiSelector 意为多列选择,关联选择,当第一列发生改变时侯,第二列甚至第三列发生相应的改变.但是官方文档上给的只 ...
- mpvue + 微信小程序 picker 实现自定义多级联动 超简洁
微信小程序官网只提供了省市区的三级联动,实际开发中更多的是自定义的多级联动: 依照微信小程序官网提供的自定义多级联动,需要使用到picker 的多列选择器,即设置 mode = multiSelect ...
- NO--13微信小程序,左右联动
写在前面: 从2016年张小龙发布微信小程序这种新的形态,到2017年小程序的不温不火,再到今年小程序的大爆发,从一度刷爆朋友圈的‘头脑王者’,再到春节聚会坐在一起的火爆小游戏“跳一跳",都 ...
- 微信小程序picker重写,精确到时分秒
https://developers.weixin.qq.com/miniprogram/dev/component/picker.html 微信小程序提供的picker组件,只精确到分,项目中需要秒 ...
- 微信小程序picker组件关于objectArray数据类型绑定
一.前言: 我发现很多的同学都在抱怨说微信小程序的picker的mode = selector/mode = multiSelector 无法实现Object Array数据类型的绑定,其实很多人就想 ...
- 微信小程序——picker通过value返回你想获取的值
关于微信小程序中的picker使用方法可以访问:picker-小程序 从它的官方文档中,可以看出它返回的value值是它range的下标: 在项目中,我们大多数时候传的值并不是需要这个下标,而是其他的 ...
随机推荐
- Networking from the container's point of view 笔记
Networking from the container's point of view Published portsThe type of network a container uses, w ...
- 神经网络高维互信息计算Python实现(MINE)
论文 Belghazi, Mohamed Ishmael, et al. " Mutual information neural estimation ." Internatio ...
- matlab随机系数矩阵产生以及矩阵的可视化函数
clc; clear all; close all; n = 100;%所产生矩阵的大小 A= sprandsym(n,0.015,0.1,1);%产生系数矩阵函数: spy(A)矩阵图形化相当于im ...
- Python之excel第三方库xlrd和xlwt
Python读取excel表格的库xlrd,首先安装xlrd: pip3 install xlrd 代码: #!usr/bin/env python3 #!-*-coding=utf-8 -*- '' ...
- C# 并发编程 (异步编程与多线程)
并发:同时做多件事情 多线程:并发的一种形式,它采用多个线程来执行程序. 并行处理:把正在执行的大量的任务分割成小块,分配给多个同时运行的线程.并行处理是多线程的一种,而多线程是并发的一种. 异步编程 ...
- 【PY从0到1】第六节 用户输入while循环
# 6 第六节 用户输入while循环 # 1> 重要的函数--input() # 我们先讲解一下input():当Python碰到input()后会执行括号内的语句. # 随后等待用户的输入. ...
- Vitis AI--个人调试篇
一.下载VITIS-AI的仓库 单独git clone很慢,因此先将其导入到gitee平台,再执行clone 1. Import VITIS-AI github repo into gitee rep ...
- Angular实战之使用NG-ZORRO创建一个企业级中后台框架(进阶篇)
前言: 上一篇文章我们讲了如何在创建的Angular项目中快速引入ng-zorro-antd企业中台组件库,并且快速构建后台管理页面框架模板.这一章主要介绍的是如何在创建好的后台管理页面框架的快速生成 ...
- Android驱动学习-Eclipse安装与配置
在ubuntu系统下安装配置Eclipse软件.并且让其支持编译java程序和内核驱动程序. 1. 下载Eclipse软件. 打开官网:http://www.eclipse.org/ 点击 DOWN ...
- Qt学习笔记-设计简易的截图工具软件
现在利用Qt来实现一个截图软件. 首先,设计一个界面出来. 最上面有一个label用来显示图片. 然后使用QPixmap中的静态函数grabWindow来获取图片.这里需要一个winID.可以使用 Q ...