这就是我们要实现的效果
<view class="consignee">
<!-- consignee 收件人 -->
<text>收件人: </text><input type=‘text‘ placeholder=‘请输入姓名‘></input>
</view>
<!-- 手机号 -->
<view class="consignee">
<text>手机号: </text><input type=‘text‘ placeholder=‘请输入手机号‘></input>
</view>
<!--所在地区 -->
<view bindtap=‘selectDistrict‘ class=‘consignee‘>
<text >所在地区</text>
<text>{{areaInfo}}</text>
</view>
<!-- 详细地址 -->
<view class=‘consignee‘>
<text>详细地址</text>
<input type=‘text‘ placeholder=‘请输入详细地址‘></input>
</view>
<!-- 完成 -->
<button class=‘btn‘>完成</button>
<view class="picker-view" animation="{{animationAddressMenu}}" style="visibility:{{addressMenuIsShow ? ‘visible‘:‘hidden‘}}">
<view style="height:10% ;width:95%;margin-top:10rpx">
<text catchtap="cityCancel">取消</text>
<text style="float: right" catchtap="citySure">确定</text>
</view>
<!--"可以显示默认的城市，使用后级联选择城市反应很慢就不使用了-->
<picker-view style="width: 100%; height: 300px;" 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="">
{{item.name}}</view>
</picker-view-column>
<picker-view-column>
<view wx:for="{{areas}}" class="picker-item" wx:key="">
{{item.name}}</view>
</picker-view-column>
</picker-view>
</view>
给“所在地区” 绑定点击事件 ‘selectDestrict’
也就是通过触发这个方法从而我们要展示什么 在这里也就是展示picker-view组件
<!--"可以显示默认的城市，使用后级联选择城市反应很慢就不使用了-->
<picker-view style="width: 100%; height: 300px;" 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="">
{{item.name}}</view>
</picker-view-column>
<picker-view-column>
<view wx:for="{{areas}}" class="picker-item" wx:key="">
{{item.name}}</view>
</picker-view-column>
</picker-view>
可以看到 我们可以在picker-view标签中定义他的宽高 以及当滑动的时候所触发的方法‘cityChange’
其余的就是利用wx:for的方法去得到相应的数据 巴拉巴拉的 那接下来就是JS阶段了
// pages/address/newAdd.js
let address = require(‘../../utils/city.js‘)
Page({
/**
* 页面的初始数据
*/
data: {
animationAddressMenu: {},
addressMenuIsShow: false,
value: [0, 0, 0],
provinces: [],
citys: [],
areas: [],
areaInfo: ‘‘
},
/**
* 生命周期函数--监听页面加载
*/
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],
})
},
// 点击所在地区弹出选择框
selectDistrict: function (e) {
var that = this
// 如果已经显示，不在执行显示动画
if (that.data.addressMenuIsShow) {
return
}
// 执行显示动画
that.startAddressAnimation(true)
},
// 执行动画
startAddressAnimation: function (isShow) {
console.log(isShow)
var that = this
// if (isShow) {
// // vh是用来表示尺寸的单位，高度全屏是100vh
// that.animation.translateY(0 + ‘vh‘).step()
// } else {
// that.animation.translateY(40 + ‘vh‘).step()
// }
that.setData({
//animationAddressMenu: that.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
that.startAddressAnimation(false)
// 将选择的城市信息显示到输入框
var areaInfo = that.data.provinces[value[0]].name + ‘,‘ + that.data.citys[value[1]].name + ‘,‘ + that.data.areas[value[2]].name
that.setData({
areaInfo: areaInfo,
})
},
// 点击蒙版时取消组件的显示
hideCitySelected: function (e) {
console.log(e)
this.startAddressAnimation(false)
},
// 处理省市县联动逻辑
cityChange: function (e) {
console.log(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]
})
}
console.log(this.data)
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
原文地址：https://www.cnblogs.com/wzy0526/p/8311714.html
时间： 2024-11-04 16:05:01