微信小程序－省市区三级联动（api）

因小程序picker组件自身的限制，需自行模拟省市区三级联动，引入了bluebrid的promise兼容库
使用方法

• 在目标 .wxml 文件中引用 selectarea.wxml 文件；
  

1. <include src="../../selectarea/selectarea.wxml"/>

复制代码

• 在目标 .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. }

复制代码

API使用的是http的，故在预览时需开启 '开发环境不校验域名以及TLS版本'，可结合自身项目更改 .selectarea.js 文件中的API地址；



项目地址：

游客，如果您要查看本帖隐藏内容请回复