// wxml 部分程式碼如下<view class="list"> <view class='list-left'>地區：</view> <view bindtap='showPicker' class="list-right {{flag ? '' : 'placeholder'}}"> <block wx:if="{{flag}}"> {{provinceName[provinceIndex]}} {{cityName[cityIndex]}} {{countyName[countyIndex]}} </block> <block wx:else>請選擇所在地區</block> </view></view><!-- <input value='{{provinceName[provinceIndex]}} {{cityName[cityIndex]} {{countyName[countyIndex]}}'></input> --><button disabled='{{!flag}}' type='primary'>提 交</button>
<view class='picker' hidden='{{show}}'> <view class='btn-group'> <view bindtap='cancel'>取消</view> <view bindtap='sure'>確定</view> </view> <picker-view bindchange="pickderChange"> <picker-view-column> <view wx:for="{{provinceName}}" class='item'>{{item}}</view> </picker-view-column> <picker-view-column> <view wx:for="{{cityName}}" class='item'>{{item}}</view> </picker-view-column> <picker-view-column> <view wx:for="{{countyName}}" class='item'>{{item}}</view> </picker-view-column> </picker-view></view><view class='mask' bindtap='cancel' hidden='{{show}}'></view>// wxss 部分程式碼如下---------------------------------page{ background: #f7f7f7;}
.list{ display: flex; background: #fff; padding: 20rpx 40rpx;}
.list-left{ width: 120rpx;}.list-right{ flex: 1;}
button{ margin-top: 200rpx; width: 700rpx;}.placeholder{ color: #ccc;}
picker-view{ height: 560rpx; width: 750rpx;}
.picker{ z-index: 1; position: fixed; bottom: 0; left: 0; width: 750rpx; height: 560rpx; display: flex; background: #fff; flex-wrap: wrap; justify-content: center;}
.btn-group{ display: flex; justify-content: space-between; width: 750rpx; padding: 0 43rpx; height: 80rpx; line-height: 80rpx; background: skyblue;}
.item{ line-height: 40rpx; text-align: center;}
.mask{ position: fixed; top: 0; left: 0; width: 750rpx; height: 100%; background: rgba(0, 0, 0, .4);}wxjs 部分程式碼如下----------------------------------------------// 引用省市區三級聯動js資源，base/data/source.js，暫時沒有var source = require('../../base/data/source.js');Page({ data: { flag: false, show: true, // 省級 provinceName: [], // 省名稱 provinceCode: [], // 省編號 provinceIndex: '', // 省序號 // 市級 cityName: [], // 市名稱 cityCode: [], // 市編號 cityIndex: '', // 市序號 // 區級 countyName: [], // 區名稱 countyCode: [], // 區編號 countyIndex: '', // 區序號 // 下標 pro: 0, cit: 0, cou: 0, }, // 載入資料 onLoad: function(){ this.setSource(); // 呼叫下面的 setSource方法 },
// 獲取省市區的資料 setSource: function(pro,cit,cou){ var pro = pro || 0; var cit = cit || 0; var cou = cou || 0; // ---------------省份的物件 var province = source['100000'] // 獲取上面引用的所有省份作為陣列 var provinceName = []; var provinceCode = []; // 根據省份編號遍歷省份物件的編號和名稱到對應的陣列中 for (var item in province){ provinceCode.push(item); // 省編號 provinceName.push(province[item]); // 省名稱 } // 把陣列返回到前端 this.setData({ provinceName: provinceName, provinceCode: provinceCode });
// ---------------市的物件 var city = source[provinceCode[pro]]; // 根據省份的序號，獲取該省的所有市作為陣列物件 var cityName = []; var cityCode = []; // 根據市的編號遍歷市物件的編號和名稱到對應的陣列中 for(var item in city){ cityCode.push(item); // 市編號 cityName.push(city[item]); // 市名稱 } // 把陣列返回到前端 this.setData({ cityCode: cityCode, cityName: cityName });
// ---------------區的物件 var county = source[cityCode[cit]]; // 根據市的序號，獲取該市的所有區作為陣列物件 var countyCode = []; var countyName = []; // 根據區的編號遍歷區物件的編號和名稱到對應的陣列中 for(var item in county){ countyCode.push(item); // 區編號 countyName.push(county[item]); // 區名稱 } // 把陣列返回到前端 this.setData({ countyCode: countyCode, countyName: countyName }); },
// 控制選擇區域的顯示和隱藏 showPicker: function(){ this.setData({ show: false }); }, // 取消時，則隱藏選擇區域 cancel: function(){ this.setData({ show: true }); }, // 控制 省，市，區 隨上級改變而改變 pickderChange: function(e){ var pro = e.detail.value[0]; var cit = e.detail.value[1]; var cou = e.detail.value[2]; this.setSource(pro,cit,cou); this.setData({ pro: pro, cit: cit, cou: cou }) }, // 確定時，把選擇的資料返回並設定到地區區域，同時也隱藏選擇區域 sure: function(){ this.setData({ provinceIndex: this.data.pro, cityIndex: this.data.cit, countyIndex: this.data.cou, flag: true }) // 呼叫取消方法，隱藏選擇區域 this.cancel(); }
})