微信小程序的省市区三级地址mysql_微信小程序picker实现的省市区三级联动
微信小程序的省市区三级联动需要使用到的是Picker多列选择器,参考文档:https://www.w3cschool.cn/weix...,
案例中用到的省市区的json文件在文后发出出来。
废话不多说,来看看具体地实现吧。
视图view
bindchange="func_changeCitysChange"
bindcolumnchange="func_changeCitysChangeColumn" value="{{ citysIndex }}" range="{{ cityArray }}">
请选择
JS代码
var arrays = common.getAreaInfo();//在头部引入 省市区地址js,这里封装成了方法了。
data:
data: {
citysIndex: [0, 0, 0], //给一个初始值索引,因为有三列,所以3个0
},
onLoad:
onLoad: function(options) {
var that = this;
if (wx.getStorageSync('global_cityData')) {
var cityArray = wx.getStorageSync('global_cityData');
} else {
//定义三列空数组
var cityArray = [
[],
[],
[],
];
for (let i = 0, len = arrays.length; i < len; i++) {
switch (arrays[i]['level']) {
case 1:
//第一列
cityArray[0].push(arrays[i]["name"]);
break;
case 2:
//第二列(默认由第一列第一个关联)
if (arrays[i]['sheng'] == arrays[0]['sheng']) {
cityArray[1].push(arrays[i]["name"]);
}
break;
case 3:
//第三列(默认第一列第一个、第二列第一个关联)
if (arrays[i]['sheng'] == arrays[0]['sheng'] && arrays[i]['di'] == arrays[1]['di']) {
cityArray[2].push(arrays[i]["name"]);
}
break;
}
}
wx.setStorageSync('global_cityData', cityArray);
}
that.setData({
cityArray: cityArray
});
},
下面就是两个事件了
func_changeCitysChange: function(e) {
var that = this;
var cityArray = that.data.cityArray;
var address='';
if (that.data.ssq == undefined){
//下面方法中没有设置ssq,应该给它默认值 ,此时citysIndex相当于[0,0,0]
var citysIndex = that.data.citysIndex;
for (let i in citysIndex) {
address += cityArray[i][citysIndex[i]]
}
}else{
address = that.data.ssq;
}
wx.showModal({
title: '',
content: address+'',
})
},
func_changeCitysChangeColumn: function(e) {
var that = this;
var cityArray = that.data.cityArray;
var list1 = []; //存放第二列数据,即市的列
var list2 = []; //存放第三列数据,即区的列
var citysIndex = [];
//主要是注意地址文件中的字段关系,省、市、区关联的字段有 sheng、di、level
switch (e.detail.column) {
case 0:
//滑动左列
for (let i = 0, len = arrays.length; i < len; i++) {
if (arrays[i]['name'] == cityArray[0][e.detail.value]) {
var sheng = arrays[i]['sheng'];
}
if (arrays[i]['sheng'] == sheng && arrays[i]['level'] == 2) {
list1.push(arrays[i]['name']);
}
if (arrays[i]['sheng'] == sheng && arrays[i]['level'] == 3 && arrays[i]['di'] == arrays[1]['di']) {
list2.push(arrays[i]['name']);
}
}
citysIndex = [e.detail.value, 0, 0];
var ssq = cityArray[0][e.detail.value] + list1[0] + list2[0]+'';
that.setData({
global_sheng: sheng
});
break;
case 1:
//滑动中列
var di;
var sheng = that.data.global_sheng;
list1 = cityArray[1];
for (let i = 0, len = arrays.length; i < len; i++) {
if (arrays[i]['name'] == cityArray[1][e.detail.value]) {
di = arrays[i]['di'];
}
}
for (let i = 0, len = arrays.length; i < len; i++) {
if (arrays[i]['sheng'] == sheng && arrays[i]['level'] == 3 && arrays[i]['di'] == di) {
list2.push(arrays[i]['name']);
}
}
citysIndex = [that.data.citysIndex[0], e.detail.value, 0];
var ssq = cityArray[0][that.data.citysIndex[0]] + list1[e.detail.value] + list2[0] + '';
break;
case 2:
//滑动右列
list1 = cityArray[1];
list2 = cityArray[2];
citysIndex = [that.data.citysIndex[0], that.data.citysIndex[1], e.detail.value];
var ssq = cityArray[0][that.data.citysIndex[0]] + list1[that.data.citysIndex[1]] + list2[e.detail.value] + '';
break;
}
that.setData({
"cityArray[1]": list1,//重新赋值中列数组,即联动了市
"cityArray[2]": list2,//重新赋值右列数组,即联动了区
citysIndex: citysIndex,//更新索引
ssq: ssq,//获取选中的省市区
});
},
用到的省市区js文件,点下面链接。
图片示例
微信小程序的省市区三级地址mysql_微信小程序picker实现的省市区三级联动相关推荐
- 微信小程序的省市区三级地址mysql_微信小程序 实现三级联动-省市区
序:项目中需要用到三级联动,自己试着写了下,也查了一些资料,现在把这个记录一下,里面地区数据,可根据个人需要做一些更改,我比较懒就不改了. wxml {{province}} {{city}} {{c ...
- 如何在微信小程序中使用php和mysql_微信小程序php后台实现
这里简单介绍用php后台实现获取openid并保存到数据库: 微信的登陆流程是这样的 首先前端发送请求到服务器: wx.login({ success: function (res) { var co ...
- 打开微信显示wifi连接到服务器地址,打开微信就能连接附近wifi,可惜大家都不知道,赶紧告诉家人...
大家好,谢谢观看本期生活小妙招,我是生活当当家,一切妙招都来于生活. Wi-Fi是一种可以将个人电脑.手持设备(如PDA.手机)等终端以无线方式互相连接的技术. 就是可以通过wifi功能(wlan)使 ...
- 微信微网站的服务器ip地址查询,微信开发之(三)获取微信服务器IP地址
官方文档解析:获取微信服务器IP地址html 在上面的官方文档中咱们能够直接在最浏览器里面进行测试例如:json 是否必须 说明 access_token 是 公众号的access_token C#代 ...
- 微信小程序如何获取手机地址定位
微信小程序如何获取手机地址定位 微信小程序中,经常需要获取地址定位. 微信小程序中如何获取地址定位. wx.getLocation({success: function (res) {console. ...
- 微信小程序:最新wordpress黑金壁纸微信小程序 二开修复版源码下载支持流量主收益
这是一款wordpress系统框架的壁纸小程序源码 相信很多人以前也有用过这类的壁纸小程序源码吧 现在给大家发的这一款是二开修复版的 和以前的安装方式差不多,支持流量主收益模式 介绍: WordPre ...
- 【小程序源码】检讨书生成微信小程序工具源码-安装搭建简单
对于经常写检讨的小伙伴来说,福音来了 因为这是一款检讨书生成小程序 所以再也不用为了写检讨而烦恼了哦 支持自定义字数下线,主题自定义 支持多种类型检讨比如:学生党的,男朋友,领导演讲稿,共青团申请书等 ...
- 微信小程序:自动采集头像大全微信小程序源码
这是一款以头像为主的一款微信小程序源码 该小程序内包含了各种分类,各种样式都有 可以说是目前最全的一款头像小程序源码 五大分类情侣,女生,男生,卡通,风景 每大分类下面都有N个小分类,每个小分类下面有 ...
- 微信小程序:流量主头像组合微信小程序
这是一个头像类型的小程序源码 支持多种流量主 比如激励视频,Banner,视频,插屏,原生模板等 小程序内包含多种头像非类,都是自动采集 比如男生头像,男声头像,动漫头像等等 另外该小程序还支持姓氏头 ...
最新文章
- Eclipse 导入逆向工程
- 财经法规税收征收管理法律制度练习题一
- SAP Spartacus翻译 i18n - internationalization 的工作原理
- CString .Format
- 输入框输入数字,且不能有小数点存在
- java先进先出 循环队列,JavaScript队列、优先队列与循环队列
- 修改dts后重编译_「正点原子FPGA连载」第二十章另一种方式编译ZYNQ镜像
- oracle转换请求无法实施,Oracle服务正常,但不响应请求的问题
- 普通的java类型是指,String是一个很普通的类 - Java那些事儿
- 智能物流给力零售业跨越式发展
- python语言中、外部模块先导入、再使用_python引入导入自定义模块和外部文件--转载Sumomo的博客...
- 计算机视觉实战(八)直方图与傅里叶变换
- 整合阿里云视频播放器——Coding在线(十四)
- 批处理Bat教程-第一章:前言
- 大话数据结构系列之快速排序算法
- imo与slack竞品分析报告
- 与蜂窝连接的无人机的空地干扰缓解
- 完全格式化硬盘(删除EFI分区)
- 计算机组成原理偶校验编码设计,计算机组成原理校验码生成电路的设计.doc
- OpenCV之findContours获取轮廓(Python版)
热门文章
- R语言sys方法:sys.timezone函数返回当前系统时区的名称、system.File函数查找系统文件或者安装包的文件路径(例如查看R Base可安装路径、dplyr包的安装路径)
- R使用tsne进行高维数据可视化实战:二维可视化、三维可视化
- t检验特征筛选详解及实战
- pandas数据索引之loc、iloc、ix详解及实例
- php 顶踩,php和jQuery实现文章页【顶】和【踩】的功能
- 基于长短读长和参考基因组的组装错误检测算法的研究
- 音频编辑软件_Audacity2.12版
- centos安装ffmpeg php,lnmp下安装ffmpeg和ffmpeg-php教程
- php连接mysql数据库测试_php连接mysql数据库连接测试文件
- GitHub 博客-- Jekyll--代码高亮,Liquid 转义字符