1.先看一下效果
2.先看下一下布局文件
布局有一个弹框和点击按钮组成,弹框为隐藏,点击可以弹出选择城市
<!--城市选择弹框start-->
<view class="location-select" wx:if="{{pickerInfo.state == true}}">
<view class="location-picker">
<view class="location-picker-top flex-center-center">
{{pickerInfo.title}}
</view>
<picker-view class="location-picker-view" value="{{pickerInfo.value}}" indicator-style="height: 50px;" bindchange="updatePicker">
<picker-view-column>
<view wx:for="{{pickerInfo.provinces}}" class="picker-province-item">
{{item.provinceName}}
</view>
</picker-view-column>
<picker-view-column>
<view wx:for="{{pickerInfo.citys}}" class="picker-city-item">
{{item.cityName}}
</view>
</picker-view-column>
</picker-view>
<!--取消和确定-->
<view class="location-picker-bottom">
<view class="picker-bottom-left" bindtap="updateLocationInfo" data-title="cancel">
{{pickerInfo.submits[0]}}
</view>
<view class="picker-bottom-right" bindtap="updateLocationInfo" data-title="select">
{{pickerInfo.submits[1]}}
</view>
</view>
</view>
</view>
<!--城市选择弹框end-->
<button bindtap="updateLocationInfo" data-title="state">点击弹出城市选择弹框:{{defaults.cityName}}</button>
3.JS代码
点击按钮弹出选择框,获取省列表(demo用本地数据代替),根据选择省的ID获取网络的城市列表(demo用本地数据代替),最后在按钮上设置选择结果
//index.js
//获取应用实例
var app = getApp()
Page({
data: {
defaults: {
cityName: '南京',
},
// 城市选择弹框
pickerInfo: {
'state': false, 'title': '选择城市', 'value': [0, 0],
'submits': ['取消', '确定'],
},
// 省列表
provinceList: [
{
provinceID: 1,
provinceName: '北京市'
},
{
provinceID: 10,
provinceName: '江苏省'
},
{
provinceID: 12,
provinceName: '安徽省'
},
],
//市列表
cityList: [
{
cityID: 1,
cityName: '北京市'
},
{
cityID: 63,
cityName: '南京市'
},
{
cityID: 64,
cityName: '无锡市'
},
{
cityID: 78,
cityName: '合肥市'
}
]
},
onLoad: function () {
},
//点击变更地点信息
updateLocationInfo: function (event) {
var that = this
var title = event.currentTarget.dataset.title
var pickerInfo = that.data.pickerInfo
// 判断是否是button
if (title == 'state') {
pickerInfo.state = true
pickerInfo.value = [0, 0]
pickerInfo.citys = []
that.setData({
pickerInfo: pickerInfo
});
//此处应该请求网络数据,为了方便我写了一些数据进行测试,获取省列表
var provinceList = that.data.provinceList;
pickerInfo.provinces = provinceList;
that.setData({
pickerInfo: pickerInfo
});
} else if (title == 'cancel') {
pickerInfo.state = false
that.setData({
pickerInfo: pickerInfo
})
} else {
// 设置选择结果
pickerInfo.state = false;
var defaults = that.data.defaults
var cityNum = pickerInfo.value[1]
var cityInfo = pickerInfo.citys[cityNum]
defaults.cityName = cityInfo.cityName
that.setData({
pickerInfo: pickerInfo,
defaults: defaults,
});
// that.getCountyList();此处可以继续模仿选择区域
}
},
//选择城市,通过bindchange和省ID获取城市列表
updatePicker: function (event) {
var that = this;
var pickerInfo = that.data.pickerInfo;
var num = event.detail.value[0];
var cityNum = event.detail.value[1];
// var requestInfo = {};
// 此处根据省ID通过网络获取城市列表,这里我用本地数据代替
// requestInfo.provinceID = pickerInfo.provinces[num].provinceID;
var cityList = that.data.cityList;
pickerInfo.citys = cityList;
pickerInfo.value = [num, cityNum];
that.setData({
pickerInfo: pickerInfo
});
},
})
4.最后是CSS文件
/*城市选择弹框start*/
.location-select {
position: absolute;
width: 750rpx;
height: 100%;
background-color: rgba(00, 00, 00, 0.3);
z-index: 2;
font-size: 14px;
font-family: "lucida grande",
"lucida sans unicode",
lucida,
helvetica,
"Hiragino Sans GB",
"Microsoft YaHei",
"WenQuanYi Micro Hei",
sans-serif;
}
.location-picker {
float: left;
margin-top: 50px;
margin-left: 25rpx;
width: 700rpx;
height: 300px;
border-radius: 5rpx;
background-color: white;
}
.location-picker-top {
float: left;
width: 700rpx;
height: 49px;
border-bottom: solid;
border-bottom-color: #eee;
border-bottom-width: 1px;
}
.location-picker-bottom {
float: left;
width: 700rpx;
height: 49px;
border-top: solid;
border-top-width: 1px;
border-top-color: #eee;
}
.picker-bottom-left {
float: left;
margin-left: 300rpx;
line-height: 50px;
height: 50px;
width: 200rpx;
font-size: 16px;
color: #707070;
text-align: center;
}
.picker-bottom-right {
float: left;
line-height: 50px;
height: 50px;
width: 200rpx;
font-size: 16px;
color: #06ccb6;
text-align: center;
}
.picker-top-title {
font-size: 20px;
color: #000;
line-height: 50px;
}
.location-picker-view {
float: left;
width: 700rpx;
height: 200px;
line-height: 50px;
background-color: #eee;
}
.location-picker-column {
background-color: orange;
}
.picker-province-item {
line-height: 50px;
height: 50px;
width: 200rpx;
margin-left: 10rpx;
font-size: 16px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-align: center;
}
.picker-city-item {
line-height: 50px;
height: 50px;
width: 200rpx;
margin-left: 10rpx;
font-size: 16px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-align: center;
}
.picker-college-item {
line-height: 50px;
height: 50px;
width: 280rpx;
font-size: 14px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-align: center;
}
/*城市选择弹框end*/
项目地址:
CSDN:http://download.csdn.net/download/qq_26014653/9896407
GitHub:https://github.com/scYao/WeChat