小程序有自带省市区选择控件,非常方便,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;
}