所需要页面引入:

<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",//获取手机验证码

  },