所需要页面引入:
<areapicker?class="itemInput"?bindareaChoosed="chooseAddress"?grade="{{userInfoShop}}"></areapicker>
配置:(路径自己改为自己项目中的路径)
{
??"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样式:(样式根据自己需求写样式就行)
.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//默认显示的地址
????}
??},
??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:{
?????//省市联动
?????bindRegionChange:?function?(e)?{
???????let?that?=?this
???????//为了让选择框有个默认值，????
???????that.setData({
?????????clas:?''
???????})
???????//下拉框所选择的值
??????//??console.log('picker发送选择改变，携带值为',?e.detail.value)
???????this.setData({
?????????//拼的字符串传后台
?????????AddSite:?e.detail.value[0]?+?"?"?+?e.detail.value[1]?+?"?"?+?e.detail.value[2],
?????????//下拉框选中的值
?????????region:?e.detail.value
???????})
????????console.log('picker发送选择改变，携带值为',?this.data.AddSite)
???????this.triggerEvent("areaChoosed",?this.data.AddSite);//页面通过监听areaChoosed来获取所选地区
?????}
???}
})
如是全局组件,请配置(app.json文件):
??"usingComponents":?{
????"areapicker":?"./pages/component/areaPicker/index",//三级地区选择
????"vercode":?"pages/component/verCode/index",//获取手机验证码
??},