小程序省市區選擇

小程序有自帶省市區選擇控件，非常方便，mode="region"即可

wxml代碼：

<picker mode="region" bindchange="bindRegionChange" value="{{region}}" >
     <view class="choose-item">
      <text class="label-txt"><text class="dot">*</text>證件地址：</text>
      <text class="picker-text">{{region[0]}} {{region[1]}} {{region[2]}}</text>
      <image class="arrow-down" mode="widthFix" src="../../imgs/arrow_down.png"></image>
    </view>
  </picker>

js代碼：

data: {
    region: ['請選擇省市區/縣', '', '']
｝,
bindRegionChange: function (e) {
    this.setData({
      region: e.detail.value
    })
}
   
  

region是一個長度爲3的數組，將第一個元素賦值可作爲placeholder默認值

wxss代碼：

.choose-item{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding-top: 25rpx;
    padding-bottom: 25rpx;
}
.label-txt{
    width: 30%;
    color: #666666;
    font-size: 32rpx;
}
.picker-text{
    width: 66%;
    color: #999999;
    font-size: 32rpx;
}
.arrow-down{
    width: 30rpx;
}