原創聲明:本文為作者原創,未經允許不得轉載,經授權轉載需注明作者和出處
1.數據在國家統計局獲取,下面是鏈接
http://www.stats.gov.cn/tjsj/tjbz/xzqhdm/201608/t20160809_1386477.html
2.如果可以的話,把代碼改模塊,方便以后使用。
寬度自適應,不用擔心省市的名字太長
下載百度:http://pan.baidu.com/s/1mh8caRe
<view>
地址:
</view>
<view class="ssjl">
<picker range="{{provinces}}" style="width:{{provinceWidth}};" range-key="name" value='1' data-value="province" bindchange="change" >
<input placeholder="請選擇省" value="{{province.name}}"/>
</picker>
<picker range="{{citys}}" style="width:{{cityWidth}};" range-key="name" value='1' data-value="city" bindchange="change" >
<input placeholder="請選擇市" value="{{city.name}}"/>
</picker>
<picker range="{{areas}}" style="width:{{areaWidth}};" range-key="name" value='1' data-value="area" bindchange="change" >
<input placeholder="請選擇區" value="{{area.name}}"/>
</picker>
</view>
<view class="other">
<input type="text" placeholder="詳細地址,比如xx縣xx街道xx樓xx號" maxlength="50"/>
</view>
<view>
{{province.name}}-{{city.name}}-{{area.name}}
</view>
//index.js
var json = require('../../utils/address.js');
Page({
data:{
provinces:json.getProvinces(),
citys:[],
areas:[],
areaWidth:'100px',
cityWidth:'100px',
provinceWidth:'100px',
},
//獲取對應的城市
getCitysByCode:function(code){
var pro=code.substr(0,2);//獲取省代碼,截取前兩位 340000->34
var citysArray=json.getCitys();//獲取所有市
var citysArr=[];
for(var index in citysArray){ //遍歷找到該省下面的所有市
if(citysArray[index].code.substr(0,2)==pro){
citysArr.push(citysArray[index])
}
}
this.setData({
citys:citysArr
})
},
//獲取對應的縣區
getAreasByCode:function(code){
var are=code.substr(0,4);//獲取縣區代碼,獲取截取前四位 340288->3402
var areasArray=json.getAreas();//獲取所有縣區
var areasArr=[];
for(var index in areasArray){ //遍歷找到該市下面的所有縣區
if(areasArray[index].code.substr(0,4)==are){
areasArr.push(areasArray[index])
}
}
this.setData({
areas:areasArr
})
},
//統一方法bindchange
change:function(e){
var category=e.currentTarget.dataset.value;//獲取方法帶的參數
var index=e.detail.value;//獲取下標
if(category=='province'){
var province=this.data.provinces[index];
this.setData({
province:province,
provinceWidth:parseInt(province.name.length)+"em",
citys:[],
city:'',
areas:[],
area:''
})
this.getCitysByCode(province.code)
}else if(category=='city'){
var city=this.data.citys[index];
this.setData({
city:city,
cityWidth:parseInt(city.name.length)+"em",
areas:[],
area:''
}),
this.getAreasByCode(city.code);//給縣區賦值
}else if(category=='area'){
var area=this.data.areas[index];//獲取該縣區
this.setData({
area:area,
areaWidth:parseInt(area.name.length)+"em",
})
}
},
})
page{
font-size: 13px;
font-family: "宋體";
width: 100%;
}
picker,view{
}
input{
text-align: center;
}
.ssjl{
/*border: 1px solid #dfdfdf;*/
display: flex;
flex-direction: row;
width: 100%;
text-align: center;
}
.other{
border: 1px solid #dfdfdf;
margin: 4px;
border-radius: 4px;
}
.ssjl picker{
margin: 4px;
border: 1px solid #dfdfdf;
border-radius: 4px;
display: flex;
flex: 1 1 auto;
flex-direction: row;
/*width: 100%;*/
height: 20px;
padding: 2px;
}
.picker{
flex: 1 1 auto;
display: block;
/*width: 100%;*/
height: 100%;
}
.picker::after{
flex-grow:2
}
function getProvinces(){
return [{"name":"安徽省", "code":"340000"},{"name":"北京市", "code":"110000"},{"name":"福建省", "code":"350000"},{"name":"甘肅省", "code":"620000"},{"name":"廣東省", "code":"440000"},{"name":"廣西壯族自治區", "code":"450000"},{"name":"貴州省", "code":"520000"},{"name":"海南省", "code":"460000"},{"name":"河北省", "code":"130000"},{"name":"河南省", "code":"410000"},{"name":"黑龍江省", "code":"230000"},{"name":"湖北省", "code":"420000"},{"name":"湖南省", "code":"430000"},{"name":"吉林省", "code":"220000"},{"name":"江蘇省", "code":"320000"},{"name":"江西省", "code":"360000"},{"name":"遼寧省", "code":"210000"},{"name":"內蒙古自治區", "code":"150000"},{"name":"寧夏回族自治區", "code":"640000"},{"name":"青海省", "code":"630000"},{"name":"山東省", "code":"370000"},{"name":"山西省", "code":"140000"},{"name":"陜西省", "code":"610000"},{"name":"上海市", "code":"310000"},{"name":"四川省", "code":"510000"},{"name":"天津市", "code":"120000"},{"name":"西藏自治區", "code":"540000"},{"name":"新疆維吾爾自治區", "code":"650000"},{"name":"云南省", "code":"530000"},{"name":"浙江省", "code":"330000"},{"name":"重慶市", "code":"500000"}]
}
function getCitys(){//代碼太多就不貼,到文件下載}
function getAreas(){//代碼太多就不貼,到文件下載
}
module.exports = {
getProvinces: getProvinces,
getCitys:getCitys,
getAreas:getAreas
}