├── pages └── index │ ├── index.json │ ├── index.wxss │ ├── index.wxml │ └── index.js ├── README.md ├── app.json ├── app.wxss ├── utils └── util.js └── app.js /pages/index/index.json: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # wechat-three-level 2 | 微信小程序,省市区三级联动 3 | http://g.recordit.co/TTikcTOSt6.gif 4 | -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages":[ 3 | "pages/index/index" 4 | ], 5 | "window":{ 6 | "backgroundTextStyle":"light", 7 | "navigationBarBackgroundColor": "#3399ff", 8 | "navigationBarTitleText": "省市区三级联动", 9 | "navigationBarTextStyle":"#fff" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /app.wxss: -------------------------------------------------------------------------------- 1 | /**app.wxss**/ 2 | .container { 3 | position: absolute; 4 | height: 100%; 5 | width: 100%; 6 | min-height: 100%; 7 | display: flex; 8 | flex-direction: column; 9 | align-items: center; 10 | justify-content: space-between; 11 | padding: 0; 12 | box-sizing: border-box; 13 | background-color: #f8f8f8; 14 | } 15 | -------------------------------------------------------------------------------- /utils/util.js: -------------------------------------------------------------------------------- 1 | function formatTime(date) { 2 | var year = date.getFullYear() 3 | var month = date.getMonth() + 1 4 | var day = date.getDate() 5 | 6 | var hour = date.getHours() 7 | var minute = date.getMinutes() 8 | var second = date.getSeconds() 9 | 10 | 11 | return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':') 12 | } 13 | 14 | function formatNumber(n) { 15 | n = n.toString() 16 | return n[1] ? n : '0' + n 17 | } 18 | 19 | module.exports = { 20 | formatTime: formatTime 21 | } 22 | -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | //app.js 2 | App({ 3 | onLaunch: function () { 4 | //调用API从本地缓存中获取数据 5 | var logs = wx.getStorageSync('logs') || [] 6 | //logs.unshift(Date.now()) 7 | //wx.setStorageSync('logs', logs) 8 | }, 9 | getUserInfo:function(cb){ 10 | var that = this 11 | if(this.globalData.userInfo){ 12 | typeof cb == "function" && cb(this.globalData.userInfo) 13 | }else{ 14 | //调用登录接口 15 | wx.login({ 16 | success: function () { 17 | wx.getUserInfo({ 18 | success: function (res) { 19 | that.globalData.userInfo = res.userInfo 20 | typeof cb == "function" && cb(that.globalData.userInfo) 21 | } 22 | }) 23 | } 24 | }) 25 | } 26 | }, 27 | globalData:{ 28 | userInfo:null 29 | } 30 | }) -------------------------------------------------------------------------------- /pages/index/index.wxss: -------------------------------------------------------------------------------- 1 | /**index.wxss**/ 2 | .input { 3 | padding-top: 200rpx; 4 | width: 100%; 5 | } 6 | 7 | .input input { 8 | width: 100%; 9 | background-color: #fff; 10 | border-bottom: 1px #d9d9d9 solid; 11 | border-top: 1px #d9d9d9 solid; 12 | padding: 20rpx 50rpx; 13 | } 14 | 15 | 16 | .citypickers{ 17 | position: fixed; 18 | height: 100%; 19 | width: 100%; 20 | min-height: 100%; 21 | background-color: #ff0; 22 | } 23 | 24 | 25 | .citybody { 26 | position: fixed; 27 | bottom: 0px; 28 | } 29 | 30 | .cityheader { 31 | position: absolute; 32 | top:0px; 33 | width: 100%; 34 | z-index: 5; 35 | } 36 | 37 | .city-cancel { 38 | float: left; 39 | margin: 20rpx; 40 | color: #828282; 41 | } 42 | 43 | .city-true { 44 | float: right; 45 | margin: 20rpx; 46 | color: #10FF10; 47 | } 48 | 49 | .section .picker { 50 | background-color: #fff; 51 | border-bottom: 2px #cccccc solid; 52 | border-top: 2px #d9d9d9 solid; 53 | padding: 20rpx; 54 | } 55 | -------------------------------------------------------------------------------- /pages/index/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 取消 18 | 确定 19 | 20 | 21 | {{item}} 22 | 23 | 24 | {{item}} 25 | 26 | 27 | {{item}} 28 | 29 | 30 | -------------------------------------------------------------------------------- /pages/index/index.js: -------------------------------------------------------------------------------- 1 | //index.js 2 | //获取应用实例 3 | var tcity = require("../../utils/citys.js"); 4 | 5 | var app = getApp() 6 | Page({ 7 | data: { 8 | provinces: [], 9 | province: "", 10 | citys: [], 11 | city: "", 12 | countys: [], 13 | county: '', 14 | value: [0, 0, 0], 15 | values: [0, 0, 0], 16 | condition: false 17 | }, 18 | bindChange: function(e) { 19 | //console.log(e); 20 | var val = e.detail.value 21 | var t = this.data.values; 22 | var cityData = this.data.cityData; 23 | 24 | if(val[0] != t[0]){ 25 | console.log('province no '); 26 | const citys = []; 27 | const countys = []; 28 | 29 | for (let i = 0 ; i < cityData[val[0]].sub.length; i++) { 30 | citys.push(cityData[val[0]].sub[i].name) 31 | } 32 | for (let i = 0 ; i < cityData[val[0]].sub[0].sub.length; i++) { 33 | countys.push(cityData[val[0]].sub[0].sub[i].name) 34 | } 35 | 36 | this.setData({ 37 | province: this.data.provinces[val[0]], 38 | city: cityData[val[0]].sub[0].name, 39 | citys:citys, 40 | county: cityData[val[0]].sub[0].sub[0].name, 41 | countys:countys, 42 | values: val, 43 | value:[val[0],0,0] 44 | }) 45 | 46 | return; 47 | } 48 | if(val[1] != t[1]){ 49 | console.log('city no'); 50 | const countys = []; 51 | 52 | for (let i = 0 ; i < cityData[val[0]].sub[val[1]].sub.length; i++) { 53 | countys.push(cityData[val[0]].sub[val[1]].sub[i].name) 54 | } 55 | 56 | this.setData({ 57 | city: this.data.citys[val[1]], 58 | county: cityData[val[0]].sub[val[1]].sub[0].name, 59 | countys:countys, 60 | values: val, 61 | value:[val[0],val[1],0] 62 | }) 63 | return; 64 | } 65 | if(val[2] != t[2]){ 66 | console.log('county no'); 67 | this.setData({ 68 | county: this.data.countys[val[2]], 69 | values: val 70 | }) 71 | return; 72 | } 73 | 74 | 75 | }, 76 | open:function(){ 77 | this.setData({ 78 | condition:!this.data.condition 79 | }) 80 | }, 81 | onLoad: function () { 82 | console.log("onLoad"); 83 | var that = this; 84 | 85 | tcity.init(that); 86 | 87 | var cityData = that.data.cityData; 88 | 89 | 90 | const provinces = []; 91 | const citys = []; 92 | const countys = []; 93 | 94 | for(let i=0;i