|
導(dǎo)讀微信小程序,簡(jiǎn)稱小程序,英文名Mini Program,是一種不需要下載安裝即可使用的應(yīng)用,它實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢(mèng)想,用戶掃一掃或搜一下即可打開應(yīng)用。小程序是一種不用下載就能使用的應(yīng)用,也是一... 微信小程序,簡(jiǎn)稱小程序,英文名Mini Program,是一種不需要下載安裝即可使用的應(yīng)用,它實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢(mèng)想,用戶掃一掃或搜一下即可打開應(yīng)用。小程序是一種不用下載就能使用的應(yīng)用,也是一項(xiàng)門檻非常高的創(chuàng)新,經(jīng)過將近兩年的發(fā)展,已經(jīng)構(gòu)造了新的小程序開發(fā)環(huán)境和開發(fā)者生態(tài)。 本篇文章給大家?guī)淼膬?nèi)容是關(guān)于小程序如何進(jìn)行地區(qū)選擇器 實(shí)現(xiàn)、調(diào)用,有一定的參考價(jià)值,有需要的朋友可以參考一下,希望對(duì)你有所幫助。
var api = require('../../../utils/api/index.js');var constants = require('../../../utils/api/lib/constants');var raw = require('../../../utils/citys');
Component({
options: {
multipleSlots: true
},
data: {
select:[0,0],
region: [Object.keys(raw), raw[Object.keys(raw)[0]]],
province:"",
city:""
},
properties: {
target: {
type: Array,
value: [],
observer: 'update'
}
},
methods: {
update: function (newVal, oldVal) {
if(!newVal || newVal.length < 2)return; var province = newVal[0]; var city = newVal[1]; var region = this.data.region; //update province
var pro_index = region[0].indexOf(province); if (pro_index < 0)return;
region = [region[0], raw[province]]; //update city
var city_index = region[1].indexOf(city); if (city_index < 0) return; this.setData({
select: [pro_index,city_index],
region: region,
province: province,
city: city
})
},
bindChange: function (e) {
if (!e.detail.value || e.detail.value.length <2)return; var region = this.data.region; var pro_index = e.detail.value[0]; var city_index = e.detail.value[1]; this.setData({
province: region[0][pro_index],
city: region[1][city_index]
}) this.notify();
},
bindColumnChange: function (e) {
if (e.detail.column === 0) { var region = this.data.region; var province = region[0][e.detail.value]; this.setData({
region: [region[0], raw[province]]
});
}
},
notify() { this.triggerEvent('regionChange', { province: this.data.province, city: this.data.city }, {})
}
}
})
<picker
mode="multiSelector"
value="{{select}}"
range="{{region}}"
bindchange="bindChange"
bindcolumnchange="bindColumnChange">
<slot></slot></picker>
var citys = { '北京市': ['市轄區(qū)'], '天津市': ['市轄區(qū)'],
'河北省': ['石家莊市', '唐山市', '秦皇島市', '邯鄲市', '邢臺(tái)市', '保定市', '張家口市', '承德市', '滄州市',
'廊坊市', '衡水市', '省直轄縣級(jí)行政區(qū)劃'],
'山西省': ['太原市', '大同市', '陽泉市', '長(zhǎng)治市', '晉城市', '朔州市', '晉中市',
'運(yùn)城市', '忻州市', '臨汾市', '呂梁市'],
'內(nèi)蒙古自治區(qū)': ['呼和浩特市', '包頭市', '烏海市', '赤峰市', '通遼市', '鄂爾多斯市', '呼倫貝爾市',
'巴彥淖爾市', '烏蘭察布市', '興安盟', '錫林郭勒盟', '阿拉善盟'],
'遼寧省': ['沈陽市', '大連市', '鞍山市', '撫順市', '本溪市', '丹東市', '錦州市', '營口市', '阜新市', '遼陽市',
'盤錦市', '鐵嶺市', '朝陽市', '葫蘆島市'],
'吉林省': ['長(zhǎng)春市', '吉林市', '四平市', '遼源市', '通化市', '白山市', '松原市', '白城市', '延邊朝鮮族自治州'],
'黑龍江省': ['哈爾濱市', '齊齊哈爾市', '雞西市', '鶴崗市', '雙鴨山市', '大慶市', '伊春市', '佳木斯市',
'七臺(tái)河市', '牡丹江市', '黑河市', '綏化市', '大興安嶺地區(qū)'],
'上海市': ['市轄區(qū)'],
'江蘇省': ['南京市', '無錫市', '徐州市', '常州市', '蘇州市', '南通市', '連云港市', '淮安市', '鹽城市', '揚(yáng)州市',
'鎮(zhèn)江市', '泰州市', '宿遷市'],
'浙江省': ['杭州市', '寧波市', '溫州市', '嘉興市', '湖州市', '紹興市', '金華市', '衢州市', '舟山市', '臺(tái)州市',
'麗水市'],
'安徽省': ['合肥市', '蕪湖市', '蚌埠市', '淮南市', '馬鞍山市', '淮北市', '銅陵市', '安慶市', '黃山市',
'滁州市', '阜陽市', '宿州市', '六安市', '亳州市', '池州市', '宣城市'],
'福建省': ['福州市', '廈門市', '莆田市', '三明市', '泉州市', '漳州市', '南平市', '龍巖市', '寧德市'],
'江西省': ['南昌市', '景德鎮(zhèn)市', '萍鄉(xiāng)市', '九江市', '新余市', '鷹潭市', '贛州市', '吉安市', '宜春市', '撫州市',
'上饒市'],
'山東省': ['濟(jì)南市', '青島市', '淄博市', '棗莊市', '東營市', '煙臺(tái)市', '濰坊市', '濟(jì)寧市',
'泰安市', '威海市', '日照市', '萊蕪市', '臨沂市', '德州市', '聊城市', '濱州市', '菏澤市'],
'河南省': ['鄭州市', '開封市', '洛陽市', '平頂山市', '安陽市', '鶴壁市', '新鄉(xiāng)市', '焦作市', '濮陽市',
'許昌市', '漯河市', '三門峽市', '南陽市', '商丘市', '信陽市', '周口市', '駐馬店市', '省直轄縣級(jí)行政區(qū)劃'],
'湖北省': ['武漢市', '黃石市', '十堰市', '宜昌市', '襄陽市', '鄂州市', '荊門市', '孝感市', '荊州市', '黃岡市',
'咸寧市', '隨州市', '恩施土家族苗族自治州', '省直轄縣級(jí)行政區(qū)劃'],
'湖南省': ['長(zhǎng)沙市', '株洲市', '湘潭市', '衡陽市', '邵陽市', '岳陽市', '常德市', '張家界市', '益陽市', '郴州市',
'永州市', '懷化市', '婁底市', '湘西土家族苗族自治州'],
'廣東省': ['廣州市', '韶關(guān)市', '深圳市', '珠海市', '汕頭市', '佛山市', '江門市', '湛江市', '茂名市', '肇慶市',
'惠州市', '梅州市', '汕尾市', '河源市', '陽江市', '清遠(yuǎn)市', '東莞市', '中山市', '潮州市', '揭陽市',
'云浮市'],
'廣西壯族自治區(qū)': ['南寧市', '柳州市', '桂林市', '梧州市', '北海市', '防城港市', '欽州市', '貴港市', '玉林市',
'百色市', '賀州市', '河池市', '來賓市', '崇左市'],
'海南省': ['海口市', '三亞市', '三沙市', '儋州市', '省直轄縣級(jí)行政區(qū)劃'],
'重慶市': ['市轄區(qū)', '縣'],
'四川省': ['成都市', '自貢市', '攀枝花市', '瀘州市', '德陽市', '綿陽市', '廣元市', '遂寧市', '內(nèi)江市', '樂山市',
'南充市', '眉山市', '宜賓市', '廣安市', '達(dá)州市', '雅安市', '巴中市', '資陽市', '阿壩藏族羌族自治州',
'甘孜藏族自治州', '涼山彝族自治州'],
'貴州省': ['貴陽市', '六盤水市', '遵義市', '安順市', '畢節(jié)市', '銅仁市', '黔西南布依族苗族自治州',
'黔東南苗族侗族自治州', '黔南布依族苗族自治州'],
'云南省': ['昆明市', '曲靖市', '玉溪市', '保山市', '昭通市', '麗江市', '普洱市', '臨滄市', '楚雄彝族自治州',
'紅河哈尼族彝族自治州', '文山壯族苗族自治州', '西雙版納傣族自治州', '大理白族自治州',
'德宏傣族景頗族自治州', '怒江傈僳族自治州', '迪慶藏族自治州'],
'西藏自治區(qū)': ['拉薩市', '日喀則市', '昌都市', '林芝市', '山南市', '那曲地區(qū)', '阿里地區(qū)'],
'陜西省': ['西安市', '銅川市', '寶雞市', '咸陽市', '渭南市', '延安市', '漢中市', '榆林市', '安康市', '商洛市'],
'甘肅省': ['蘭州市', '嘉峪關(guān)市', '金昌市', '白銀市', '天水市', '武威市', '張掖市', '平?jīng)鍪?#39;, '酒泉市', '慶陽市',
'定西市', '隴南市', '臨夏回族自治州', '甘南藏族自治州'],
'青海省': ['西寧市', '海東市', '海北藏族自治州', '黃南藏族自治州', '海南藏族自治州', '果洛藏族自治州',
'玉樹藏族自治州', '海西蒙古族藏族自治州'],
'寧夏回族自治區(qū)': ['銀川市', '石嘴山市', '吳忠市', '固原市', '中衛(wèi)市'],
'新疆維吾爾自治區(qū)': ['烏魯木齊市', '克拉瑪依市', '吐魯番市', '哈密市', '昌吉回族自治州',
'博爾塔拉蒙古自治州', '巴音郭楞蒙古自治州', '阿克蘇地區(qū)', '克孜勒蘇柯爾克孜自治州',
'喀什地區(qū)', '和田地區(qū)', '伊犁哈薩克自治州', '塔城地區(qū)', '阿勒泰地區(qū)', '自治區(qū)直轄縣級(jí)行政區(qū)劃'],
'臺(tái)灣省': ['臺(tái)灣'],
'香港特別行政區(qū)': ['香港'],
'澳門特別行政區(qū)': ['澳門']
}module.exports = citys;用的時(shí)候這樣用: <region-widget target="{{select}}" bindregionChange="onRegionChange">
<text>{{select[0]}}{{select[1]}}</text></region-widget>Page({
data: {
select:["",""]
},
onRegionChange:function(e){
console.log(e.detail);
this.setData({select: [e.detail.province, e.detail.city]})
} ...}以上就是小程序如何進(jìn)行地區(qū)選擇器 實(shí)現(xiàn)、調(diào)用?的詳細(xì)內(nèi)容,更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章! 小程序是一種不需要下載安裝即可使用的應(yīng)用,它實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢(mèng)想,用戶掃一掃或者搜一下即可打開應(yīng)用。 |
溫馨提示:喜歡本站的話,請(qǐng)收藏一下本站!