微信小程序选择城市弹窗
wxml
//引用
所在城市: 请选择
{{province}}{{cityName}}
返回
请选择地址
{{province}}
取消
{{item.province}}
{{utils.toSubString(item)}}
wxss
.top{
display: flex;
justify-content: space-between;
padding-bottom: 20rpx;
border-bottom: 1rpx solid rgb(238, 236, 236);
}
.left{
background-color: rgb(242,241,241);
color: gray;
width: 120rpx;
line-height: 60rpx;
text-align: center;
height: 60rpx;
margin-left: 20rpx;
margin-top: 20rpx;
border-radius: 10rpx;
font-size: 26rpx;
}
.right{
background-color: rgb(242,241,241);
color: gray;
width: 120rpx;
line-height: 60rpx;
text-align: center;
height: 60rpx;
margin-right: 20rpx;
margin-top: 20rpx;
border-radius: 10rpx;
font-size: 26rpx;
}
.center{
margin-top: 30rpx;
color:rgb(66,125,180)
}
.city{
display: flex;
width: 100%;
flex-wrap: wrap;
}
.item{
width: 18%;
border: 5rpx solid rgb(242,241,241);
height: 60rpx;
text-align: center;
line-height: 60rpx;
font-size: 26rpx;
margin: 10rpx 20rpx;
border-radius: 10rpx;
}
.city_item{
width: 18%;
border: 5rpx solid rgb(242,241,241);
height: 60rpx;
text-align: center;
line-height: 60rpx;
font-size: 26rpx;
margin: 10rpx 20rpx;
border-radius: 10rpx;
}
js
Page({
/**
* 页面的初始数据
*/
data: {
cityShow: false,
province: '',
cityList: [],
cityName: '',
city: [{
province: '北京',
city: ['北京城区']
},
{
province: '天津',
city: ['天津城区']
},
{
province: '河北',
city:['石家庄市','唐山市','秦皇岛','邯郸市','邢台市','保定市','张家口市','承德市','沧州市','廊坊市','衡水市']
},
{
province: '山西',
city:['太原市','大同市','阳泉市','长治市','晋城市','朔州市','晋中市','运城市','忻州市','临汾市','吕梁市']
},
{
province: '内蒙古',
city:['呼和浩特市','包头市','乌海市','赤峰市','通辽市','鄂尔多斯市','呼伦贝尔市','巴彦淖尔市','乌兰蔡布市','兴安盟',
'锡林郭勒盟','阿拉善盟']
},
{
province: '辽宁',
city:['沈阳市','大连市','鞍山市','抚顺市','本溪市','丹东市','锦州市','营口市','阜新市','辽阳市','盘锦市','铁岭市',
'朝阳市','葫芦岛市']
},
{
province: '吉林',
city:['长春市','吉林市','四平市','辽源市','通化市','白山市','松原市','白城市','延边朝鲜族自治州']
},
{
province: '黑龙江',
city:['哈尔滨市','齐齐哈尔市','鸡西市','鹤岗市','双鸭山市','大庆市','伊春市','佳木斯市','七台河市','牡丹江市',
'黑河市','绥化市','大兴安岭地区']
},
{
province: '上海',
city:['上海城区']
},
{
province: '江苏',
city:['南京市','无锡市','徐州市','常州市','苏州市','南通市','连云港市','淮安市','盐城市','扬州市','镇江市','泰州市',
'宿迁市']
},
{
province: '浙江',
city:['杭州市','宁波市','温州市','嘉兴市','湖州市','绍兴市','金华市','衢州市','舟山市','台州市','丽水市']
},
{
province: '安徽',
city:['合肥市','芜湖市','蚌埠市','淮南市','马鞍山市','淮北市','铜陵市','安庆市','黄山市','滁州市','阜阳市',
'宿州市','六安市','亳州市','池州市','宣城市']
},
{
province: '福建',
city:['福州市','厦门市','莆田市','三明市','泉州市','漳州市','南平市','龙岩市','宁德市']
},
{
province: '江西',
city:['南昌市','景德镇市','萍乡市','九江市','新余市','鹰潭市','赣州市','吉安市','宜春市','抚州市','上饶市']
},
{
province: '山东',
city:['济南市','青岛市','淄博市','枣庄市','东营市','烟台市','潍坊市','济宁市','泰安市','威海市','日照市','莱芜市',
'临沂市','德州市','聊城市','滨州市','菏泽市']
},
{
province: '河南',
city:['郑州市','开封市','洛阳市','平顶山市','安阳市','鹤壁市','新乡市','焦作市','濮阳市','许昌市','漯河市','三门峡市',
'南阳市','商丘市','信阳市','周口市','驻马店市','济源市']
},
{
province: '湖北',
city:['武汉市','黄石市','十堰市','宜昌市','襄阳市','鄂州市','荆门市','孝感市','荆州市','黄冈市','咸宁市','随州市','恩施土家族苗族自治州','潜江市','神农架林区','天门市','仙桃市']
},
{
province: '湖南',
city:['长沙市','株洲市','湘潭市','衡阳市','邵阳市','岳阳市','常德市','张家界市','益阳市','郴州市','永州市','怀化市','娄底市','湘西土家族苗族自治州']
},
{
province: '广东',
city:['广州市','韶关市','深圳市','珠海市','汕头市','佛山市','江门市','湛江市','茂名市','肇庆市','惠州市','梅州市','汕尾市',
'河源市','阳江市','清远市','东莞市','中山市','潮州市','揭阳市','云浮市','东山群岛']
},
{
province: '广西',
city:['南宁市','柳州市','桂林市','梧州市','北海市','防城港市','钦州市','贵港市','玉林市','百色市','贺州市','河池市','来宾市','崇左市']
},
{
province: '海南',
city:['白沙黎族自治县','保亭黎族苗族自治县','昌江黎族自治县','澄迈县','海口市','三亚市','三沙市','儋州市','定安县','东方市',
'乐东黎族自治县','陵水黎族自治县','琼海市','琼中黎族苗族自治县','屯昌县','万宁市','文昌市','五指山市']
},
{
province: '重庆',
city:['重庆城区','重庆郊县']
},
{
province: '四川',
city:['成都市','自贡市','攀枝花市','泸州市','德阳市','绵阳市','广元市','遂宁市','内江市','乐山市','南充市','眉山市','宜宾市',
'广安市','达州市','雅安市','巴中市','资阳市','阿坝藏族羌族自治州','甘孜藏族自治州','凉山彝族自治州']
},
{
province: '贵州',
city:['贵阳市','六盘水市','遵义市','安顺市','毕节市','铜仁市','黔西南布依族自治州','黔东南苗族侗族自治州','黔南布依族苗族自治州']
},
{
province: '云南',
city:['昆明市','曲靖市','玉溪市','保山市','昭通市','丽江市','普洱市','临沧市','楚雄彝族自治州','红河哈尼族彝族自治州','文山壮族苗族自治州','西双版纳傣族自治州','大理白族自治州','德宏傣族景颇族自治州','怒江傈傈族自治州','迪庆藏族自治州']
},
{
province: '西藏',
city:['拉萨市','日喀则市','昌都市','林芝市','山南市','那曲地区','阿里地区']
},
{
province: '陕西',
city:['西安市','铜川市','宝鸡市','咸阳市','渭南市','延安市','汉中市','榆林市','安康市','商洛市']
},
{
province: '甘肃',
city:['兰州市','嘉峪关市','金昌市','白银市','天水市','武威市','张掖市','平凉市','酒泉市','庆阳市','定西市','陇南市','临夏回族自治州','甘南藏族自治州']
},
{
province: '青海',
city:['西宁市','海东市','海北藏族自治州','黄南藏族自治州','海南藏族自治州','果洛藏族自治州','玉树藏族自治州','海西蒙古族自治州']
},
{
province: '宁夏',
city:['银川市','石嘴山市','吴忠市','固原市','中卫市']
},
{
province: '新疆',
city:['阿拉尔市','北屯市','可克达拉市','昆玉市','石河子市','双河市','乌鲁木齐市','克拉玛依市','吐鲁番市','哈密市','昌吉回族自治州','博尔塔拉蒙古自治州',
'巴音郭楞蒙古自治州','阿克苏地区','克孜勒苏柯尔克孜自治州','喀什地区','和田地区','伊犁哈萨克自治州','塔城地区','阿勒泰地区','铁门关市','图木舒克市','五家渠市']
},
{
province: '台湾',
city:['台北市','新北市','桃园市','台中市','台南市','高雄市']
}, {
province: '香港',
city:['中西区','湾仔区','东区','南区','油尖旺区','深水埗区','九龙城区','黄大仙区','观塘区','荃湾区','屯门区','元朗区',
'北区','大埔区','西贡区','沙田区','葵青区','离岛区']
}, {
province: '澳门',
city:['花地玛堂区','花王堂区','望德堂区','大堂区','风顺堂区','嘉模堂区','路凼填海区','圣方济各堂区']
},
],
},
openCity() {
this.setData({
cityShow: true
})
},
onCityClose() {
this.setData({
cityShow: false
})
},
onProvince(e) {
console.log(e.currentTarget.dataset.name)
this.setData({
province: e.currentTarget.dataset.name.province,
cityList: e.currentTarget.dataset.name.city
})
console.log(this.data.cityList)
console.log(this.data.province)
},
onCity(e) {
console.log(e.currentTarget.dataset.name)
this.setData({
cityName: e.currentTarget.dataset.name,
cityShow: false
})
},
back() {
this.setData({
province: ''
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
return {
title: '',
path: '/pages/form/form?userId='+Constant.userId+'&share=true',
}
}
})wxs
//截取字符串长度>=14
var util = {
toSubString: function (value) {
if (value.length>4){
var str = value.substring(0, 4)
return str + "..."
} else {
return value
}
}
}
module.exports = {
toSubString: util.toSubString
}