所需要頁面引入:
<areapicker?class="itemInput"?bindareaChoosed="chooseAddress"?grade="{{userInfoShop}}"></areapicker>
配置:(路徑自己改為自己項(xiàng)目中的路徑)
{
??"component":?true,
??"usingComponents":?{
????"areaPicker":?"/pages/component/areaPicker/index"
??}
}
WXML頁面:
<picker?mode="region"?bindchange="bindRegionChange"?value="{{AddSite}}"?custom-item="{{customItem}}"
name="AddSite"?class="picker_box"?>
??<view?class="picker?{{clas}}"?>{{AddSite}}</view>
</picker>
WXSS樣式:(樣式根據(jù)自己需求寫樣式就行)
.picker_box{
??flex:?3;
??color:#7c7c7c;
??width:100%;
??height:?100%;
??letter-spacing:2rpx;
??overflow:?hidden;
??text-overflow:?ellipsis;
??white-space:?nowrap;
??font-size:?26rpx;
}
JSON配置:(作為組件用于頁面,要添加component :true)
{
??"usingComponents":?{},
??"component":?true
}
js邏輯:
let?calls?=?require("../../../utils/area.js")//引入省市縣的js代碼(白嫖請看:GitHub - suncunxu/Notes)
Component({
??properties:{
????grade:{
??????type:?String//默認(rèn)顯示的地址
????}
??},
??ready:?function?()?{
????let?that?=?this
????if(!that.data.grade){
??????this.setData({
????????AddSite?:?'請選擇-請選擇-請選擇'
??????})
????}else{
??????this.setData({
????????AddSite?:?that.data.grade
??????})
????}
????//?console.log("this.data.grade====",that.data.grade);
??},
??data:?{
?????customItem:?[],
?????AddSite?:?'請選擇-請選擇-請選擇',
???},
???methods:{
?????//省市聯(lián)動(dòng)
?????bindRegionChange:?function?(e)?{
???????let?that?=?this
???????//為了讓選擇框有個(gè)默認(rèn)值，????
???????that.setData({
?????????clas:?''
???????})
???????//下拉框所選擇的值
??????//??console.log('picker發(fā)送選擇改變，攜帶值為',?e.detail.value)
???????this.setData({
?????????//拼的字符串傳后臺(tái)
?????????AddSite:?e.detail.value[0]?+?"?"?+?e.detail.value[1]?+?"?"?+?e.detail.value[2],
?????????//下拉框選中的值
?????????region:?e.detail.value
???????})
????????console.log('picker發(fā)送選擇改變，攜帶值為',?this.data.AddSite)
???????this.triggerEvent("areaChoosed",?this.data.AddSite);//頁面通過監(jiān)聽areaChoosed來獲取所選地區(qū)
?????}
???}
})
如是全局組件,請配置(app.json文件):
??"usingComponents":?{
????"areapicker":?"./pages/component/areaPicker/index",//三級(jí)地區(qū)選擇
????"vercode":?"pages/component/verCode/index",//獲取手機(jī)驗(yàn)證碼
??},
