欢迎光临,了解微信小程序开发,就上易用通!

当前位置 : 易用通 > 小程序模板
微信小程序-省市区微信小程序-省市区
立即下载

微信小程序-省市区

模板分类 : 小程序模板 模板编号 : Y151 源码文件 : 完全开源 下载权限 : VIP会员
模板大小 :  模板指数 :  更新时间 : 2018-01-16 15:02 模板等级 : ☆☆☆☆☆

模板截图:

因小程序picker组件自身的限制,需自行模拟省市区三级联动 使用方法
  • 在目标 .wxml 文件中引用 selectarea.wxml 文件;
  1. <include src="../../selectarea/selectarea.wxml"/>
  2.  
  3. <template is="selectArea" />
复制代码
  • 在目标 .wxss 文件中引用 selectarea.wxss 文件;
  1. @import "../../selectarea/selectarea.wxss";
复制代码
  • 在目标 .js 文件中引用 selectarea.js 文件, 并定义好如下对象;
  1. import { SA } from '../../selectarea/selectarea';
复制代码
  1. const conf = {
  2.  
  3.     onLoad: function (options) {
  4.  
  5.         SA.load(this); // 初始化区域
  6.  
  7.     },
  8.  
  9.     choosearea() { // 页面弹框触发事件
  10.  
  11.         SA.choosearea(this); 
  12.  
  13.     },
  14.  
  15.     addDot() { // 字符串截取
  16.  
  17.         SA.addDot(this);
  18.  
  19.     },
  20.  
  21.     tapProvince(e) { // 点击省份
  22.  
  23.         SA.tapProvince(e, this);
  24.  
  25.     },
  26.  
  27.     tapCity(e) { // 点击城市
  28.  
  29.         SA.tapCity(e, this);
  30.  
  31.     },
  32.  
  33.     tapDistrict(e) { // 点击区域
  34.  
  35.         SA.tapDistrict(e, this);
  36.  
  37.     },
  38.  
  39.     cancel() { // 取消选择
  40.  
  41.         SA.cancel(this);
  42.  
  43.     },
  44.  
  45.     confirm(e) { // 确认选择区域
  46.  
  47.         SA.confirm(e, this);
  48.  
  49.     }
  50.  
  51. }
  52.  
  53. Page(conf);
复制代码
使用示例参考 test 目录
API使用的是http的,故在预览时需开启 '开发环境不校验域名以及TLS版本',可结合自身项目更改 .selectarea.js 文件中的API地址;
微信小程序-省市区(图1) 

加入收藏
立即下载
分享到微信朋友圈
X

免责声明:

1. 本站所有素材(未指定商用),仅限学习交流,请勿用于商业用途。
2. 本站所有小程序模板Demo和图片均来自用户分享上传和网络收集,模板和图片版权归原作者及原出处所有。
3. 未经合法授权,会员不得以任何形式发布、传播、复制、转售该素材。