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