微信⼩程序实现收货地址城市选择效果（添加收货地址）先来张效果图
这⾥主要是城市选择效果，请忽视其他，不要吐槽，谢谢
接下来看⼀下代码吧
wxml
<!--pages/my/my-add-address/index.wxml-->
<view class="redact-address">
<view class="posss-layout">
<view class="mains">
<view class="address-msg">
<view class="item-msg">收货⼈</view>
<view class="ction">
<input type="text" placeholder="请填写收货⼈姓名" value="{{consigneeName}}" bindblur="consigneeNameInput" placeholder-class="phcolor"></input>
</view>
<view class="address-right">
<image src="../../../img/icon/icon-add-address-ur.png"></image>
</view>
</view>
<view class="address-msg">
<view class="item-msg">⼿机号码</view>
<view class="ction">
王太利<input type="number" placeholder="请填写收货⼈⼿机号码" value="{{phone}}" maxlength="11" bindblur="phoneInput" placeholder-class="phcolor"></input> </view>
</view>
<view class="address-msg">
<view class="item-msg">所在地区</view>
<view class="ction" bindtap='lect'>
<input disabled="disabled" placeholder="省市区县、乡镇等" value="{{consigneeRegion}}" bindblur="consigneeRegionInput" placeholder-class="phcolor"></i </view>
<view class="address-rights" bindtap='lect'>
<image src="../../../img/icon/icon-site-location.png"></image>
<view>定位</view>
</view>
</view>
<view class="address-msg">
<view class="item-msg">详细地址</view>
<view class="ction">素描小狗
<input type="text" placeholder="街道、楼牌号等" value="{{detailedAddress}}" bindblur="detailedAddressInput" placeholder-class="phcolor"></input>
</view>
</view>
<view class="label">
<view class="label-title">标签</view>
<view class="label-list">
<block wx:for="{{labelList}}" wx:key="index">
<view class="labels {{labelDefault==index? 'labels-active': ''}}" data-index="{{index}}" bindtap="chooLabelSelect">{{item}}</view>
</block>
</view>
</view>
<view class="default-tting">
<view class="defaul-tting-left">
<view>设置默认地址</view>
<view>提醒：每次下单会默认推荐使⽤该地址</view>西红柿作用
</view>
<image class="defaul-tting-right" src="../../../img/icon/icon-off-by-default.png"></image>
</view>年终奖一般是月薪几倍
</view>
</view>
</view>
<view class="btn" bindtap="submit">保存</view>
<view class="picker" animation="{{animationAddressMenu}}" >
<view class="picker-view" animation="{{animationAddressMenu}}" >
<!-- 确认取消按钮 -->
<view class='gangedBtn'>
<view class='gangedBtn'>
<text class="city-cancel" catchtap="cityCancel">取消</text>
<text catchtap="citySure">确定</text>
</view>
<!-- 选择地址 -->
<picker-view class='cont' bindchange="cityChange" value="{{value}}" wx:key="">
<!-- 省 -->
<picker-view-column>
<view wx:for="{{provinces}}" class="picker-item" wx:key="index">{{item.name}}</view> </picker-view-column>
<!-- 市 -->
<picker-view-column>
<view wx:for="{{citys}}" class="picker-item" wx:key="index">{{item.name}}</view>
</picker-view-column>
<!-- 区 -->
<picker-view-column>
<view wx:for="{{areas}}" class="picker-item" wx:key="index">{{item.name}}</view>
</picker-view-column>
电锯开木头打一个成语</picker-view>
</view>
</view>
wxss
/* pages/my/my-add-address/index.wxss */
.redact-address {
background: white;
margin-bottom: 20rpx;
}
.address-msg {
height: 128rpx;
display: flex;
align-items: center;
现代别墅设计background: #FFFFFF;
border-top: 2rpx solid #efefef;
font-size: 28.68rpx;
color: #333333;
padding: 0 20rpx;
}
.address-right image {
width: 32rpx;
height: 32rpx;
}
.address-rights {
display: flex;
align-items: center;
}
.address-rights image {
width: 26rpx;
height: 32rpx;
margin-right: 13rpx;
}
.
address-rights view {
font-size: 28.68rpx;
}
.address-msg:last-child {
border-bottom: none;
}
.ction {
width: 58%;
}
.phcolor {
.phcolor {
color: #999999;
}
.item-msg {
width: 25%;
margin-right: 25rpx;
}
.img {
width: 35rpx;
height: 35rpx;
align-lf: center;
}
.
address-right {
width: 100rpx;
display: flex;
flex-direction: row-rever;
巢姓
}
/* 标签 */
.label {
display: flex;
height: 128rpx;
align-items: center;
margin-top: 73rpx;
border-top: 1px solid #EEEEEE;
border-bottom: 1px solid #EEEEEE; padding: 0 20rpx;
}
.label-title {
font-size: 28.68rpx;
color: #333333;
margin-right: 83rpx;
}
.label .label-list {
输出设备display: flex;
}
.
label .label-list .labels{
height: 40rpx;
width: 96rpx;
border: 1px solid #EEEEEE;
margin-right: 37rpx;
text-align: center;
line-height: 40rpx;
font-size: 24rpx;
color: #000000;
border-radius: 20rpx;
}
.
labels-active {
background: #F73C41 !important; color: #FFFFFF !important;
}
/* 默认设置 */
.default-tting {
display: flex;
justify-content: space-between;
align-items: center;
height: 160rpx;
padding: 0 20rpx;
}
.
defaul-tting-left view:nth-child(1){ font-size: 28.68rpx;
color: #333333;
margin-bottom: 25rpx;
}
