github连接：https://github.com/UFO0001/wechat-three-level
//index.js //获取应用实例 var tcity = require("../../utils/citys.js"); var app = getApp() Page({ data: { provinces: [], province: "", citys: [], city: "", countys: [], county: '', value: [0, 0, 0], values: [0, 0, 0], condition: false }, bindChange: function(e) { var val = e.detail.value var t = this.data.values; var cityData = this.data.cityData; if(val[0] != t[0]){ console.log('province'); const citys = []; const countys = []; for (let i = 0 ; i < cityData[val[0]].sub.length; i++) { citys.push(cityData[val[0]].sub[i].name) } for (let i = 0 ; i < cityData[val[0]].sub[0].sub.length; i++) { countys.push(cityData[val[0]].sub[0].sub[i].name) } this.setData({ province: this.data.provinces[val[0]], city: cityData[val[0]].sub[0].name, citys:citys, county: cityData[val[0]].sub[0].sub[0].name, countys:countys, values: val, value:[val[0],0,0] }) return; } if(val[1] != t[1]){ console.log('city'); const countys = []; for (let i = 0 ; i < cityData[val[0]].sub[val[1]].sub.length; i++) { countys.push(cityData[val[0]].sub[val[1]].sub[i].name) } this.setData({ city: this.data.citys[val[1]], county: cityData[val[0]].sub[val[1]].sub[0].name, countys:countys, values: val, value:[val[0],val[1],0] }) return; } if(val[2] != t[2]){ console.log('county'); this.setData({ county: this.data.countys[val[2]], values: val }) return; } }, open:function(){ this.setData({ condition:!this.data.condition }) }, onLoad: function () { console.log("onLoad"); var that = this; tcity.init(that); var cityData = that.data.cityData; const provinces = []; const citys = []; const countys = []; for(let i=0;i<cityData.length;i++){ provinces.push(cityData[i].name); } console.log('省份完成'); for (let i = 0 ; i < cityData[0].sub.length; i++) { citys.push(cityData[0].sub[i].name) } console.log('城市完成'); for (let i = 0 ; i < cityData[0].sub[0].sub.length; i++) { countys.push(cityData[0].sub[0].sub[i].name) } that.setData({ 'provinces': provinces, 'citys':citys, 'countys':countys, 'province':cityData[0].name, 'city':cityData[0].sub[0].name, 'county':cityData[0].sub[0].sub[0].name }) console.log('初始化完成'); } })
<!--index.wxml--> <view class="container"> <view class="input"> <input placeholder="选择地址" value="{{province}}-{{city}}-{{county}}" focus="{{focus}}" bindfocus="open" /> </view> </view> <view wx:if="{{condition}}" class="citypicker"> <picker-view indicator-style="height: 50px;" style="width: 100%; height: 300px;" value="{{value}}" bindchange="bindChange" class="citybody"> <view class="cityheader"> <view bindtap="open" class="city-cancel">取消</view> <view bindtap="open" class="city-true">确定</view> </view> <picker-view-column> <view wx:for="{{provinces}}" wx:key="item" style="line-height: 50px;padding-left:10px;">{{item}}</view> </picker-view-column> <picker-view-column> <view wx:for="{{citys}}" wx:key="item" style="line-height: 50px;padding-left:10px;">{{item}}</view> </picker-view-column> <picker-view-column> <view wx:for="{{countys}}" wx:key="item" style="line-height: 50px;padding-left:10px;">{{item}}</view> </picker-view-column> </picker-view> </view> .input { padding-top: 450rpx; width: 100%; } .input input { width: 100%; background-color: #fff; border-bottom: 1px #d9d9d9 solid; border-top: 1px #d9d9d9 solid; padding: 20rpx 50rpx; } .citypickers{ position: fixed; height: 100%; width: 100%; min-height: 100%; background-color: #ff0; } .citybody { position: fixed; bottom: 0px; } .cityheader { position: absolute; top:0px; width: 100%; z-index: 5; } .city-cancel { float: left; margin: 20rpx; color: #828282; } .city-true { float: right; margin: 20rpx; color: #10FF10; } .section .picker { background-color: #fff; border-bottom: 2px #cccccc solid; border-top: 2px #d9d9d9 solid; padding: 20rpx; }
