简单记录直接上代码思路自己理：
addressEditor.wxml
<!--pages/my/my-add-address/index.wxml--> <view class="redact-address"> <view class="possess-layout"> <view class="mains"> <view class="address-msg"> <view class="item-msg">收货人</view> <view class="section"> <input type="text" placeholder="请填写收货人姓名" value="{{consigneeName}}" bindblur="consigneeNameInput" placeholder-class="phcolor"></input> </view> <view class="address-right"> <image src="../../img/shop/icon/jiantou-right.png"></image> </view> </view> <view class="address-msg"> <view class="item-msg"></view> <view class="section"> <view class="sex flex" wx:if="{{sexType==0}}" data-index="{{1}}" bindtap="chooseSexType"> <view class="sex-btn flex"> <image src="../../img/shop/icon/choice-b.png"></image> <text>男</text> </view> <view class="sex-btn flex"> <image src="../../img/shop/icon/choice.png"></image> <text>女</text> </view> </view> <view class="sex flex" wx:if="{{sexType==1}}" data-index="{{0}}" bindtap="chooseSexType"> <view class="sex-btn flex"> <image src="../../img/shop/icon/choice.png"></image> <text>男</text> </view> <view class="sex-btn flex"> <image src="../../img/shop/icon/choice-b.png"></image> <text>女</text> </view> </view> </view> <view class="address-right"> <image src="../../img/shop/icon/jiantou-right.png"></image> </view> </view> <view class="address-msg"> <view class="item-msg">联系方式</view> <view class="section"> <input type="number" placeholder="请填写收货人联系方式" value="{{phone}}" maxlength="11" bindblur="phoneInput" placeholder-class="phcolor"></input> </view> <view class="address-right"> <image src="../../img/shop/icon/jiantou-right.png"></image> </view> </view> <view class="address-msg"> <view class="item-msg">收货地址</view> <view class="section" bindtap='select'> <input disabled="disabled" placeholder="省市区县、乡镇等" value="{{consigneeRegion}}" bindblur="consigneeRegionInput" placeholder-class="phcolor"></input> </view> <view class="address-right" bindtap='select'> <image src="../../img/shop/icon/jiantou-right.png"></image> </view> </view> <view class="address-msg"> <view class="item-msg">详细地址</view> <view class="section"> <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="chooseLabelSelect">{{item}}</view> </block> </view> </view> <!-- <view class="default-setting"> <view class="defaul-setting-left"> <view>设置默认地址</view> <view>提醒：每次下单会默认推荐使用该地址</view> </view> <image class="defaul-setting-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}}" style="visibility:{{addressMenuIsShow ? 'visible':'hidden'}}"> <view class="picker-view" animation="{{animationAddressMenu}}" style="visibility:{{addressMenuIsShow ? 'visible':'hidden'}}"> <!-- 确认取消按钮 --> <view class='gangedBtn'> <text class="city-cancel" catchtap="cityCancel">取消</text> <text style="float: right" 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>addressEditor.wxss
/* pages/my/my-add-address/index.wxss */ .redact-address { background: white; margin-bottom: 20rpx; } .address-msg { height: 100rpx; display: flex; align-items: center; background: #FFFFFF; border-top: 2rpx solid #efefef; font-size: 28.68rpx; color: #333333; margin: 0 20rpx; } .address-right image { width: 15rpx; height: 25rpx; } .address-rights { display: flex; align-items: center; width: 100rpx; flex-direction: row-reverse; } .address-rights image { width: 22rpx; height: 32rpx; } .address-rights view { font-size: 28.68rpx; } .address-msg:last-child { border-bottom: none; } .section { width: 58%; } .phcolor { color: #999999; } .item-msg { width: 25%; margin-right: 25rpx; } .img { width: 35rpx; height: 35rpx; align-self: center; } .address-right { width: 100rpx; display: flex; flex-direction: row-reverse; } /* 标签 */ .label { display: flex; height: 128rpx; align-items: center; margin-top: 73rpx; border-top: 1px solid #EEEEEE; border-bottom: 1px solid #EEEEEE; margin: 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 #efefef; margin-right: 37rpx; text-align: center; line-height: 40rpx; font-size: 24rpx; color: #343434; border-radius: 10rpx; } .label .label-list .labels.labels-active{ background: #FFF7E5; color: #FF8808; } /* 默认设置 */ .default-setting { display: flex; justify-content: space-between; align-items: center; height: 160rpx; padding: 0 20rpx; } .defaul-setting-left view:nth-child(1){ font-size: 28.68rpx; color: #333333; margin-bottom: 25rpx; } .defaul-setting-left view:nth-child(2) { font-size: 20rpx; color: #333333; } .defaul-setting-right { height: 64rpx; width: 105rpx; } .btn { width: 680rpx; height: 88rpx; background: #4396F7; color: #FFFFFF; position: fixed; bottom: 55rpx; left: 35rpx; border-radius: 41.5rpx; font-size: 36rpx; text-align: center; line-height: 88rpx; } /* 城市选择 */ .picker { width: 100%; height: 100%; display: flex; z-index: 12; background-color: #fff; background: rgba(0, 0, 0, 0.2); flex-direction: column; justify-content: center; align-items: center; position: fixed; bottom: 0; left: 0rpx; } .picker-view { width: 100%; display: flex; z-index: 12; background-color: #fff; flex-direction: column; justify-content: center; align-items: center; position: fixed; bottom: 0; left: 0rpx; height: 40vh; border-top-left-radius: 30rpx; border-top-right-radius: 30rpx; } .gangedBtn { border-top: 1px solid #efefef; border-top-left-radius: 30rpx; border-top-right-radius: 30rpx; width: 100%; height: 90rpx; padding: 0 66rpx; box-sizing: border-box; line-height: 90rpx; text-align: center; color: black; font-size: 0.8rem; display: flex; background: white; justify-content: space-between; } .cont { width: 100%; height: 389rpx; } .picker-item { line-height: 70rpx; margin-left: 5rpx; margin-right: 5rpx; text-align: center; } .address { width: 100%; height: 90rpx; line-height: 90rpx; text-align: center; border-bottom: 1rpx solid #f1f1f1; } .city-cancel { color: gray; } .sex-btn image{ width: 30rpx; height: 30rpx; margin-right: 10rpx; } .sex{ align-items: center; justify-content: space-between; padding-right: 40%; } .sex-btn{ align-items: center; }addressEditor.js
const address = require('../../../utils/mock.js')//换成自己的地址 Page({ /** * 控件当前显示的数据 * provinces:所有省份 * citys 选择省对应的所有市, * areas 选择市对应的所有区 * consigneeRegion：点击确定时选择的省市县结果 * animationAddressMenu：动画 * addressMenuIsShow：是否可见 */ /** * 页面的初始数据 */ data: { animationAddressMenu: {}, addressMenuIsShow: false, value: [0, 0, 0], provinces: [], consigneeName: "张三", phone: "13552598553", consigneeRegion: "北京市海淀区", detailedAddress: "中关村软件园一期", labelList: ["家", "公司", "学校"], //标签 labelDefault: 0, // 标签默认 sexType:0 }, consigneeNameInput: function(e) { this.setData({ consigneeName: e.detail.value }) }, phoneInput: function(e) { this.setData({ phone: e.detail.value }) }, consigneeRegionInput: function (e) { this.setData({ consigneeRegion: e.detail.value }) }, detailedAddressInput: function (e) { this.setData({ detailedAddress: e.detail.value }) }, chooseLabelSelect: function(e) { var index = e.currentTarget.dataset.index; this.setData({ labelDefault: index }) }, chooseSexType: function(e) { var index = e.currentTarget.dataset.index; this.setData({ sexType: index }) }, submit: function() { var acceptName = this.data.consigneeName; var mobile = this.data.phone; var sexType = this.data.sexType; var latitude = getApp().globalData.latitude; var longitude = getApp().globalData.longitude; var positionName = this.data.consigneeRegion; var address = this.data.detailedAddress; if (acceptName == "") { wx: wx.showToast({ title: '请输入姓名', icon: 'none' }) return false } else if (mobile == "") { wx: wx.showToast({ title: '请输入手机号码', icon: 'none' }) return false } else if (positionName == "") { wx: wx.showToast({ title: '请选择所在地区', icon: 'none' }) return false } else if (address == "") { wx: wx.showToast({ title: '请输入详细地址', icon: 'none' }) return false } else { //提交ajax } }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { // 默认联动显示北京 var id = address.provinces[0].id this.setData({ provinces: address.provinces, citys: address.citys[id], areas: address.areas[address.citys[id][0].id], }) }, // 点击所在地区弹出选择框 select: function (e) { // 如果已经显示，不在执行显示动画 if (this.data.addressMenuIsShow) { return false } else { // 执行显示动画 this.startAddressAnimation(true) } }, // 执行动画 startAddressAnimation: function (isShow) { if (isShow) { // vh是用来表示尺寸的单位，高度全屏是100vh this.animation.translateY(0 + 'vh').step() } else { this.animation.translateY(40 + 'vh').step() } this.setData({ animationAddressMenu: this.animation.export(), addressMenuIsShow: isShow, }) }, // 点击地区选择取消按钮 cityCancel: function (e) { this.startAddressAnimation(false) }, // 点击地区选择确定按钮 citySure: function (e) { var that = this var city = that.data.city var value = that.data.value this.startAddressAnimation(false) // 将选择的城市信息显示到输入框 var consigneeRegion = that.data.provinces[value[0]].name + '-' + that.data.citys[value[1]].name + '-' + that.data.areas[value[2]].name that.setData({ consigneeRegion: consigneeRegion, }) }, // 处理省市县联动逻辑 cityChange: function (e) { var value = e.detail.value var provinces = this.data.provinces var citys = this.data.citys var areas = this.data.areas var provinceNum = value[0] var cityNum = value[1] var countyNum = value[2] // 如果省份选择项和之前不一样，表示滑动了省份，此时市默认是省的第一组数据， if (this.data.value[0] != provinceNum) { var id = provinces[provinceNum].id this.setData({ value: [provinceNum, 0, 0], citys: address.citys[id], areas: address.areas[address.citys[id][0].id], }) } else if (this.data.value[1] != cityNum) { // 滑动选择了第二项数据，即市，此时区显示省市对应的第一组数据 var id = citys[cityNum].id this.setData({ value: [provinceNum, cityNum, 0], areas: address.areas[citys[cityNum].id], }) } else { // 滑动选择了区 this.setData({ value: [provinceNum, cityNum, countyNum] }) } }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { var animation = wx.createAnimation({ duration: 500, timingFunction: 'linear', }) this.animation = animation }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } })
mock.js
https://download.csdn.net/download/Payne_liu/12984237
