主要效果
源码
wxml(/img/search_icon.png和/img/add_icon.png为本地图片![](https://i-blog.csdnimg.cn/blog_migrate/025f4e0677ad4d7a8de40481861c8a09.png)
):
<view class="head {{search&&'r_head'}}">
<!-- 搜索框 -->
<view class="flex-row">
<view class="head_input">
<image src="/img/search_icon.png" class="search_icon"></image>
<input type="text" placeholder="搜索" placeholder-class="place_holder" bindinput="getValue" value="{{search}}"></input>
</view>
<view class="sha_icon" catchtap="clear_input">取消</view>
</view>
<view class="flex-row head_curr" wx:if="{{!search}}">
<image src="/img/add_icon.png" class="h_c_icon" />
<view>当前定位城市:{{current_city}}</view>
</view>
</view>
<scroll-view wx:if="{{!search}}" scroll-y="true" class="sy_container" scroll-into-view="{{scrollViewId}}">
<view class="hot_city">
<view class="title">热门城市</view>
<view class="flex-row flex-wrap box">
<block wx:for="{{hot_city}}" wx:key="hot">
<view class="name" hover-class="sel_city" hover-stay-time="150">{{item.name}}</view>
</block>
</view>
</view>
<view class="all_city">
<view wx:for="{{city_list}}" wx:key="city_list" wx:if="{{item.data.length>0}}">
<view class="letter_name" id="{{item.letter}}">{{item.letter}}</view>
<view class="city">
<block wx:for="{{item.data}}" wx:key="data" wx:for-index="index0" wx:for-item="item0">
<view class="name flex-row" hover-class="city_hover" hover-stay-time='150'>{{item0.cityName}}</view>
</block>
</view>
</view>
</view>
</scroll-view>
<!-- 侧边选择索引 -->
<view wx:if="{{!search}}">
<view class="fixed_bar" style="height: {{barHeight}}px;" catchtouchstart="touchStart" catchtouchmove="touchMove" catchtouchend="touchEnd" catchtouchcancel="touchCancel">
<view wx:for="{{city_list}}" wx:key="index" style="height: {{barHeight/22}}px;">
<view class="bar_item flex-column j_c {{curr==index&&'bar_item_active'}}" style="width: {{barHeight/22*0.75}}px;height: {{barHeight/22*0.75}}px;">{{item.letter}}</view>
</view>
</view>
<view wx:if="{{showLetter &&city_list[curr].letter}}" class="fixed_letter">{{city_list[curr].letter}}</view>
</view>
<view wx:if="{{search}}" class="result_list">
<view wx:if="{{result.length>0}}">
<block wx:for="{{result}}" wx:key="result">
<view class="r_item" hover-stay-time='150' hover-class="r_item_hover">{{item.name}}</view>
</block>
</view>
<view wx:else class="flex-column no_data">
<image src="https://i.postimg.cc/7P00ckMG/image.png" />
<view>请输入正确的城市名称呢</view>
</view>
</view>
二、 JS
// pages/home/homeCity/homeCity.js
const { cityData } = require('./city.js')
Page({
/**
* 页面的初始数据
*/
data: {
current_city: "",
search: "",
hot_city: [
{
name: "北京"
}, {
name: "上海"
}, {
name: "广州"
}, {
name: "长沙"
}, {
name: "张家口"
}, {
name: "杭州"
}, {
name: "西安"
}, {
name: "南京"
}, {
name: "苏州"
},
],
city_list: [],
barHeight: 0,
curr: -1,
scrollViewId: "",
barTop: 0,
showLetter: false,
result: [],//搜索结果
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
this.setData({
current_city: options.currentCity || "北京",
city_list: cityData
})
wx.getSystemInfo({
success: (res) => {
let winHeight = res.windowHeight
let barHeight = winHeight - res.windowWidth / 750 * 300;
this.setData({
barHeight: barHeight,
barTop: res.windowWidth / 750 * 180,
})
}
})
},
/**
* 获取value值
* @param {*} e
*/
getValue(e) {
this.setData({
search: e.detail.value
}, () => {
this.search(e.detail.value)
})
},
/**
* 搜索成功
*/
search(e) {
let result = [], { city_list } = this.data;
city_list.forEach((item1) => {
item1.data.forEach((item2) => {
if (item2.keyword.indexOf(e.toLocaleUpperCase()) !== -1) {
result.push({ name: item2.cityName })
}
})
})
this.setData({
result,
})
},
/**
* 清空验证码
*/
clear_input() {
this.setData({
search: ""
})
},
touch(e) {
let pageY = e.touches[0].pageY
let index = Math.floor((pageY - this.data.barTop) / (this.data.barHeight / 22))//向下取整
let item = this.data.city_list[index]
if (item) {
this.setData({
scrollViewId: item.letter,
curr: index
})
}
},
touchStart(e) {
this.setData({
showLetter: true
})
this.touch(e)
},
touchMove(e) {
this.touch(e)
},
touchEnd() {
this.setData({
showLetter: false,
})
},
touchCancel() {
this.setData({
showLetter: false,
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})
三、wxss
/* pages/home/homeCity/homeCity.wxss */
page {
height: 100%;
background: #f2f5f7;
}
.head {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 170rpx;
box-sizing: border-box;
padding: 3rpx 20rpx 0;
background: #fff;
z-index: 9999;
}
.r_head {
height: 90rpx;
}
.head_input {
position: relative;
flex: 1;
}
.search_icon {
position: absolute;
top: 50%;
left: 0;
margin-top: -15rpx;
width: 28rpx;
height: 30rpx;
padding-left: 23rpx;
}
.head input {
height: 60rpx;
padding-left: 75rpx;
font-size: 28rpx;
border-radius: 30rpx;
background: #f2f5f7;
}
.place_holder {
font-size: 28rpx;
color: #999999;
}
.sha_icon {
margin-left: 18rpx;
font-size: 28rpx;
color: #333333;
}
.head_curr {
height: 100rpx;
color: #333;
font-size: 28rpx;
padding-top: 20rpx;
box-sizing: border-box;
}
.h_c_icon {
flex-shrink: 0;
margin-right: 15rpx;
width: 40rpx;
height: 40rpx;
}
.sy_container {
box-sizing: border-box;
width: 100%;
height: 100%;
padding-top: 170rpx;
}
.hot_city .title {
padding: 10rpx 30rpx;
color: #999;
font-size: 26rpx;
}
.hot_city .box {
background-color: #fff;
padding: 5rpx 30rpx 15rpx 40rpx;
box-sizing: border-box;
}
.hot_city .box .name {
vertical-align: top;
display: inline-block;
min-width: 140rpx;
line-height: 56rpx;
height: 56rpx;
border-radius: 28rpx;
font-size: 28rpx;
color: #333;
text-align: center;
padding: 0 20rpx;
box-sizing: border-box;
margin-top: 10rpx;
margin-right: 20rpx;
position: relative;
}
.hot_city .box .name::after {
content: '';
position: absolute;
width: 200%;
height: 200%;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scale(0.5, 0.5);
transform: scale(0.5, 0.5);
-webkit-box-sizing: border-box;
box-sizing: border-box;
left: 0;
top: 0;
border-radius: 56rpx;
border: 1rpx solid rgb(235, 225, 225);
}
.sel_city {
color: #fff !important;
background: pink;
}
.all_city .letter_name {
height: 48rpx;
font-size: 24rpx;
color: #999;
background: #f2f5f7;
padding: 0 30rpx;
line-height: 48rpx;
}
.all_city .city {
background-color: #fff;
}
.all_city .city .name {
width: 100%;
padding: 30rpx;
font-size: 28rpx;
color: #333;
position: relative;
overflow: hidden;
}
.all_city .city .name::after {
content: '';
position: absolute;
border-bottom: 1rpx solid #eaeef1;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
bottom: 0;
right: 0;
left: 30rpx;
}
.city_hover {
background-color: #eee !important;
}
.fixed_bar {
position: fixed;
z-index: 999;
top: 180rpx;
right: 0px;
padding-right: 10rpx;
width: 50rpx;
font-size: 22rpx;
text-align: center;
}
.bar_item {
background-color: rgb(233, 228, 220);
border-radius: 50%;
}
@media screen and (max-width: 320px) {
.fixed_bar {
font-size: 20rpx;
}
}
.bar_item_active {
background-color: #fff;
box-shadow: 5rpx 5rpx 5rpx #f7c3ee;
}
.fixed_letter {
position: absolute;
z-index: 20;
width: 160rpx;
height: 160rpx;
left: 50%;
top: 50%;
margin-left: -80rpx;
margin-top: -80rpx;
border-radius: 80rpx;
text-align: center;
line-height: 160rpx;
font-size: 70rpx;
color: #fff;
background-color: rgba(0, 0, 0, 0.5);
box-shadow: 5rpx 5rpx 5rpx #f7c3ee;
}
/* 搜索结果 */
.result_list {
padding-top: 90rpx;
background: #fff;
width: 100%;
}
.r_item {
width: 100%;
position: relative;
padding: 30rpx 0 30rpx 30rpx;
font-size: 28rpx;
color: #333;
box-sizing: border-box;
}
.r_item::after {
content: '';
position: absolute;
border-bottom: 1rpx solid #eaeef1;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
bottom: 0;
right: 0;
left: 30rpx;
}
.r_item_hover {
background-color: #eee !important;
}
.no_data {
height: 500rpx;
justify-content: center;
font-size: 27rpx;
color: #999;
}
.no_data image {
width: 250rpx;
height: 162rpx;
margin-bottom: 30rpx;
}
四、
city.js文件内容
module.exports = {
cityData: [
{
"letter": "A",
"data": [
{
"cityName": "阿坝",
"keyword": "阿坝ABA"
},
{
"cityName": "阿克苏",
"keyword": "阿克苏AKESU"
},
{
"cityName": "阿拉善",
"keyword": "阿拉善ALASHAN"
},
{
"cityName": "阿勒泰",
"keyword": "阿勒泰ALETAI"
},
{
"cityName": "阿里",
"keyword": "阿里ALI"
},
{
"cityName": "安康",
"keyword": "安康ANKANG"
},
{
"cityName": "安庆",
"keyword": "安庆ANQING"
},
{
"cityName": "鞍山",
"keyword": "鞍山ANSHAN"
},
{
"cityName": "马鞍山",
"keyword": "马鞍山MAANSHAN"
},
{
"cityName": "安顺",
"keyword": "安顺ANSHUN"
},
{
"cityName": "安阳",
"keyword": "安阳ANYANG"
}
]
},
{
"letter": "B",
"data": [
{
"cityName": "白城",
"keyword": "白城BAICHENG"
},
{
"cityName": "白山",
"keyword": "白山BAISHAN"
},
{
"cityName": "白银",
"keyword": "白银BAIYIN"
},
{
"cityName": "保定",
"keyword": "保定BAODING"
},
{
"cityName": "宝鸡",
"keyword": "宝鸡BAOJI"
},
{
"cityName": "保山",
"keyword": "保山BAOSHAN"
},
{
"cityName": "包头",
"keyword": "包头BAOTOU"
},
{
"cityName": "巴彦淖尔",
"keyword": "巴彦淖尔BAYANNAOER"
},
{
"cityName": "巴音郭楞",
"keyword": "巴音郭楞BAYINGUOLENG"
},
{
"cityName": "巴中",
"keyword": "巴中BAZHONG"
},
{
"cityName": "北海",
"keyword": "北海BEIHAI"
},
{
"cityName": "北京",
"keyword": "北京BEIJING"
},
{
"cityName": "蚌埠",
"keyword": "蚌埠BENGBU"
},
{
"cityName": "本溪",
"keyword": "本溪BENXI"
},
{
"cityName": "毕节",
"keyword": "毕节BIJIE"
},
{
"cityName": "滨州",
"keyword": "滨州BINZHOU"
},
{
"cityName": "博尔塔拉",
"keyword": "博尔塔拉BOERTALA"
},
{
"cityName": "百色",
"keyword": "百色BOSE"
},
{
"cityName": "亳州",
"keyword": "亳州BOZHOU"
}
]
},
{
"letter": "C",
"data": [
{
"cityName": "沧州",
"keyword": "沧州CANGZHOU"
},
{
"cityName": "长春",
"keyword": "长春CHANGCHUN"
},
{
"cityName": "常德",
"keyword": "常德CHANGDE"
},
{
"cityName": "昌都",
"keyword": "昌都CHANGDU"
},
{
"cityName": "昌吉",
"keyword": "昌吉CHANGJI"
},
{
"cityName": "长沙",
"keyword": "长沙CHANGSHA"
},
{
"cityName": "长治",
"keyword": "长治CHANGZHI"
},
{
"cityName": "常州",
"keyword": "常州CHANGZHOU"
},
{
"cityName": "潮州",
"keyword": "潮州CHAOZHOU"
},
{
"cityName": "承德",
"keyword": "承德CHENGDE"
},
{
"cityName": "成都",
"keyword": "成都CHENGDU"
},
{
"cityName": "郴州",
"keyword": "郴州CHENZHOU"
},
{
"cityName": "赤峰",
"keyword": "赤峰CHIFENG"
},
{
"cityName": "池州",
"keyword": "池州CHIZHOU"
},
{
"cityName": "重庆",
"keyword": "重庆CHONGQING"
},
{
"cityName": "崇左",
"keyword": "崇左CHONGZUO"
},
{
"cityName": "楚雄",
"keyword": "楚雄CHUXIONG"
},
{
"cityName": "滁州",
"keyword": "滁州CHUZHOU"
}
]
},
{
"letter": "D",
"data": [
{
"cityName": "大理",
"keyword": "大理DALI"
},
{
"cityName": "大连",
"keyword": "大连DALIAN"
},
{
"cityName": "丹东",
"keyword": "丹东DANDONG"
},
{
"cityName": "儋州",
"keyword": "儋州DANZHOU"
},
{
"cityName": "大庆",
"keyword": "大庆DAQING"
},
{
"cityName": "大同",
"keyword": "大同DATONG"
},
{
"cityName": "大兴安岭",
"keyword": "大兴安岭DAXINGANLING"
},
{
"cityName": "达州",
"keyword": "达州DAZHOU"
},
{
"cityName": "德宏",
"keyword": "德宏DEHONG"
},
{
"cityName": "德阳",
"keyword": "德阳DEYANG"
},
{
"cityName": "德州",
"keyword": "德州DEZHOU"
},
{
"cityName": "定西",
"keyword": "定西DINGXI"
},
{
"cityName": "迪庆",
"keyword": "迪庆DIQING"
},
{
"cityName": "东莞",
"keyword": "东莞DONGGUAN"
},
{
"cityName": "东营",
"keyword": "东营DONGYING"
}
]
},
{
"letter": "E",
"data": [
{
"cityName": "鄂尔多斯",
"keyword": "鄂尔多斯EERDUOSI"
},
{
"cityName": "恩施",
"keyword": "恩施ENSHI"
},
{
"cityName": "鄂州",
"keyword": "鄂州EZHOU"
}
]
},
{
"letter": "F",
"data": [
{
"cityName": "防城港",
"keyword": "防城港FANGCHENGGANG"
},
{
"cityName": "佛山",
"keyword": "佛山FOSHAN"
},
{
"cityName": "抚顺",
"keyword": "抚顺FUSHUN"
},
{
"cityName": "阜新",
"keyword": "阜新FUXIN"
},
{
"cityName": "阜阳",
"keyword": "阜阳FUYANG"
},
{
"cityName": "抚州",
"keyword": "抚州FUZHOU"
},
{
"cityName": "福州",
"keyword": "福州FUZHOU"
}
]
},
{
"letter": "G",
"data": [
{
"cityName": "甘南",
"keyword": "甘南GANNAN"
},
{
"cityName": "赣州",
"keyword": "赣州GANZHOU"
},
{
"cityName": "甘孜",
"keyword": "甘孜GANZI"
},
{
"cityName": "广安",
"keyword": "广安GUANGAN"
},
{
"cityName": "广元",
"keyword": "广元GUANGYUAN"
},
{
"cityName": "广州",
"keyword": "广州GUANGZHOU"
},
{
"cityName": "贵港",
"keyword": "贵港GUIGANG"
},
{
"cityName": "桂林",
"keyword": "桂林GUILIN"
},
{
"cityName": "贵阳",
"keyword": "贵阳GUIYANG"
},
{
"cityName": "果洛",
"keyword": "果洛GUOLUO"
},
{
"cityName": "固原",
"keyword": "固原GUYUAN"
}
]
},
{
"letter": "H",
"data": [
{
"cityName": "哈尔滨",
"keyword": "哈尔滨HAERBIN"
},
{
"cityName": "海北",
"keyword": "海北HAIBEI"
},
{
"cityName": "海东",
"keyword": "海东HAIDONG"
},
{
"cityName": "海口",
"keyword": "海口HAIKOU"
},
{
"cityName": "海南藏族自治州",
"keyword": "海南藏族自治州HAINAN"
},
{
"cityName": "海南",
"keyword": "海南藏族自治州HAINAN"
},
{
"cityName": "海南",
"keyword": "海南HAINAN"
},
{
"cityName": "海西",
"keyword": "海西HAIXI"
},
{
"cityName": "哈密",
"keyword": "哈密HAMI"
},
{
"cityName": "邯郸",
"keyword": "邯郸HANDAN"
},
{
"cityName": "杭州",
"keyword": "杭州HANGZHOU"
},
{
"cityName": "汉中",
"keyword": "汉中HANZHONG"
},
{
"cityName": "河北",
"keyword": "河北HEBEI"
},
{
"cityName": "鹤壁",
"keyword": "鹤壁HEBI"
},
{
"cityName": "河池",
"keyword": "河池HECHI"
},
{
"cityName": "合肥",
"keyword": "合肥HEFEI"
},
{
"cityName": "鹤岗",
"keyword": "鹤岗HEGANG"
},
{
"cityName": "黑河",
"keyword": "黑河HEIHE"
},
{
"cityName": "河南",
"keyword": "河南HENAN"
},
{
"cityName": "衡水",
"keyword": "衡水HENGSHUI"
},
{
"cityName": "衡阳",
"keyword": "衡阳HENGYANG"
},
{
"cityName": "和田",
"keyword": "和田HETIAN"
},
{
"cityName": "河源",
"keyword": "河源HEYUAN"
},
{
"cityName": "菏泽",
"keyword": "菏泽HEZE"
},
{
"cityName": "贺州",
"keyword": "贺州HEZHOU"
},
{
"cityName": "红河",
"keyword": "红河HONGHE"
},
{
"cityName": "淮安",
"keyword": "淮安HUAIAN"
},
{
"cityName": "淮北",
"keyword": "淮北HUAIBEI"
},
{
"cityName": "怀化",
"keyword": "怀化HUAIHUA"
},
{
"cityName": "淮南",
"keyword": "淮南HUAINAN"
},
{
"cityName": "黄冈",
"keyword": "黄冈HUANGGANG"
},
{
"cityName": "黄南",
"keyword": "黄南HUANGNAN"
},
{
"cityName": "黄山",
"keyword": "黄山HUANGSHAN"
},
{
"cityName": "黄石",
"keyword": "黄石HUANGSHI"
},
{
"cityName": "湖北",
"keyword": "湖北HUBEI"
},
{
"cityName": "呼和浩特",
"keyword": "呼和浩特HUHEHAOTE"
},
{
"cityName": "惠州",
"keyword": "惠州HUIZHOU"
},
{
"cityName": "葫芦岛",
"keyword": "葫芦岛HULUDAO"
},
{
"cityName": "呼伦贝尔",
"keyword": "呼伦贝尔HULUNBEIER"
},
{
"cityName": "湖州",
"keyword": "湖州HUZHOU"
}
]
},
// {
// "letter": "I",
// "data": []
// },
{
"letter": "J",
"data": [
{
"cityName": "佳木斯",
"keyword": "佳木斯JIAMUSI"
},
{
"cityName": "吉安",
"keyword": "吉安JIAN"
},
{
"cityName": "江门",
"keyword": "江门JIANGMEN"
},
{
"cityName": "焦作",
"keyword": "焦作JIAOZUO"
},
{
"cityName": "嘉兴",
"keyword": "嘉兴JIAXING"
},
{
"cityName": "嘉峪关",
"keyword": "嘉峪关JIAYUGUAN"
},
{
"cityName": "揭阳",
"keyword": "揭阳JIEYANG"
},
{
"cityName": "吉林",
"keyword": "吉林JILIN"
},
{
"cityName": "济南",
"keyword": "济南JINAN"
},
{
"cityName": "金昌",
"keyword": "金昌JINCHANG"
},
{
"cityName": "晋城",
"keyword": "晋城JINCHENG"
},
{
"cityName": "景德镇",
"keyword": "景德镇JINGDEZHEN"
},
{
"cityName": "荆门",
"keyword": "荆门JINGMEN"
},
{
"cityName": "荆州",
"keyword": "荆州JINGZHOU"
},
{
"cityName": "金华",
"keyword": "金华JINHUA"
},
{
"cityName": "济宁",
"keyword": "济宁JINING"
},
{
"cityName": "晋中",
"keyword": "晋中JINZHONG"
},
{
"cityName": "锦州",
"keyword": "锦州JINZHOU"
},
{
"cityName": "九江",
"keyword": "九江JIUJIANG"
},
{
"cityName": "酒泉",
"keyword": "酒泉JIUQUAN"
},
{
"cityName": "鸡西",
"keyword": "鸡西JIXI"
}
]
},
{
"letter": "K",
"data": [
{
"cityName": "开封",
"keyword": "开封KAIFENG"
},
{
"cityName": "喀什",
"keyword": "喀什KASHI"
},
{
"cityName": "克拉玛依",
"keyword": "克拉玛依KELAMAYI"
},
{
"cityName": "克孜勒苏",
"keyword": "克孜勒苏KEZILESU"
},
{
"cityName": "昆明",
"keyword": "昆明KUNMING"
}
]
},
{
"letter": "L",
"data": [
{
"cityName": "来宾",
"keyword": "来宾LAIBIN"
},
{
"cityName": "莱芜",
"keyword": "莱芜LAIWU"
},
{
"cityName": "廊坊",
"keyword": "廊坊LANGFANG"
},
{
"cityName": "兰州",
"keyword": "兰州LANZHOU"
},
{
"cityName": "拉萨",
"keyword": "拉萨LASA"
},
{
"cityName": "乐山",
"keyword": "乐山LESHAN"
},
{
"cityName": "凉山",
"keyword": "凉山LIANGSHAN"
},
{
"cityName": "连云港",
"keyword": "连云港LIANYUNGANG"
},
{
"cityName": "聊城",
"keyword": "聊城LIAOCHENG"
},
{
"cityName": "辽阳",
"keyword": "辽阳LIAOYANG"
},
{
"cityName": "辽源",
"keyword": "辽源LIAOYUAN"
},
{
"cityName": "丽江",
"keyword": "丽江LIJIANG"
},
{
"cityName": "临沧",
"keyword": "临沧LINCANG"
},
{
"cityName": "临汾",
"keyword": "临汾LINFEN"
},
{
"cityName": "临夏",
"keyword": "临夏LINXIA"
},
{
"cityName": "临沂",
"keyword": "临沂LINYI"
},
{
"cityName": "林芝",
"keyword": "林芝LINZHI"
},
{
"cityName": "丽水",
"keyword": "丽水LISHUI"
},
{
"cityName": "六盘水",
"keyword": "六盘水LIUPANSHUI"
},
{
"cityName": "柳州",
"keyword": "柳州LIUZHOU"
},
{
"cityName": "陇南",
"keyword": "陇南LONGNAN"
},
{
"cityName": "龙岩",
"keyword": "龙岩LONGYAN"
},
{
"cityName": "娄底",
"keyword": "娄底LOUDI"
},
{
"cityName": "六安",
"keyword": "六安LUAN"
},
{
"cityName": "洛阳",
"keyword": "洛阳LUOYANG"
},
{
"cityName": "泸州",
"keyword": "泸州LUZHOU"
},
{
"cityName": "吕梁",
"keyword": "吕梁LVLIANG"
}
]
},
{
"letter": "M",
"data": [
{
"cityName": "马鞍山",
"keyword": "马鞍山MAANSHAN"
},
{
"cityName": "茂名",
"keyword": "茂名MAOMING"
},
{
"cityName": "眉山",
"keyword": "眉山MEISHAN"
},
{
"cityName": "梅州",
"keyword": "梅州MEIZHOU"
},
{
"cityName": "绵阳",
"keyword": "绵阳MIANYANG"
},
{
"cityName": "牡丹江",
"keyword": "牡丹江MUDANJIANG"
}
]
},
{
"letter": "N",
"data": [
{
"cityName": "南昌",
"keyword": "南昌NANCHANG"
},
{
"cityName": "南充",
"keyword": "南充NANCHONG"
},
{
"cityName": "南京",
"keyword": "南京NANJING"
},
{
"cityName": "南宁",
"keyword": "南宁NANNING"
},
{
"cityName": "南平",
"keyword": "南平NANPING"
},
{
"cityName": "南通",
"keyword": "南通NANTONG"
},
{
"cityName": "南阳",
"keyword": "南阳NANYANG"
},
{
"cityName": "那曲",
"keyword": "那曲NAQU"
},
{
"cityName": "内江",
"keyword": "内江NEIJIANG"
},
{
"cityName": "宁波",
"keyword": "宁波NINGBO"
},
{
"cityName": "宁德",
"keyword": "宁德NINGDE"
},
{
"cityName": "怒江",
"keyword": "怒江NUJIANG"
}
]
},
// {
// "letter": "O",
// "data": []
// },
{
"letter": "P",
"data": [
{
"cityName": "盘锦",
"keyword": "盘锦PANJIN"
},
{
"cityName": "攀枝花",
"keyword": "攀枝花PANZHIHUA"
},
{
"cityName": "平顶山",
"keyword": "平顶山PINGDINGSHAN"
},
{
"cityName": "平凉",
"keyword": "平凉PINGLIANG"
},
{
"cityName": "萍乡",
"keyword": "萍乡PINGXIANG"
},
{
"cityName": "普洱",
"keyword": "普洱PUER"
},
{
"cityName": "莆田",
"keyword": "莆田PUTIAN"
},
{
"cityName": "濮阳",
"keyword": "濮阳PUYANG"
}
]
},
{
"letter": "Q",
"data": [
{
"cityName": "黔东南",
"keyword": "黔东南QIANDONGNAN"
},
{
"cityName": "黔南",
"keyword": "黔南QIANNAN"
},
{
"cityName": "黔西南",
"keyword": "黔西南QIANXINAN"
},
{
"cityName": "青岛",
"keyword": "青岛QINGDAO"
},
{
"cityName": "庆阳",
"keyword": "庆阳QINGYANG"
},
{
"cityName": "清远",
"keyword": "清远QINGYUAN"
},
{
"cityName": "秦皇岛",
"keyword": "秦皇岛QINHUANGDAO"
},
{
"cityName": "钦州",
"keyword": "钦州QINZHOU"
},
{
"cityName": "齐齐哈尔",
"keyword": "齐齐哈尔QIQIHAER"
},
{
"cityName": "七台河",
"keyword": "七台河QITAIHE"
},
{
"cityName": "泉州",
"keyword": "泉州QUANZHOU"
},
{
"cityName": "曲靖",
"keyword": "曲靖QUJING"
},
{
"cityName": "衢州",
"keyword": "衢州QUZHOU"
}
]
},
{
"letter": "R",
"data": [
{
"cityName": "日喀则",
"keyword": "日喀则RIKAZE"
},
{
"cityName": "日照",
"keyword": "日照RIZHAO"
}
]
},
{
"letter": "S",
"data": [
{
"cityName": "三门峡",
"keyword": "三门峡SANMENXIA"
},
{
"cityName": "三明",
"keyword": "三明SANMING"
},
{
"cityName": "三沙",
"keyword": "三沙SANSHA"
},
{
"cityName": "三亚",
"keyword": "三亚SANYA"
},
{
"cityName": "上海",
"keyword": "上海SHANGHAI"
},
{
"cityName": "商洛",
"keyword": "商洛SHANGLUO"
},
{
"cityName": "商丘",
"keyword": "商丘SHANGQIU"
},
{
"cityName": "上饶",
"keyword": "上饶SHANGRAO"
},
{
"cityName": "山南",
"keyword": "山南SHANNAN"
},
{
"cityName": "汕头",
"keyword": "汕头SHANTOU"
},
{
"cityName": "汕尾",
"keyword": "汕尾SHANWEI"
},
{
"cityName": "韶关",
"keyword": "韶关SHAOGUAN"
},
{
"cityName": "绍兴",
"keyword": "绍兴SHAOXING"
},
{
"cityName": "邵阳",
"keyword": "邵阳SHAOYANG"
},
{
"cityName": "沈阳",
"keyword": "沈阳SHENYANG"
},
{
"cityName": "深圳",
"keyword": "深圳SHENZHEN"
},
{
"cityName": "石家庄",
"keyword": "石家庄SHIJIAZHUANG"
},
{
"cityName": "十堰",
"keyword": "十堰SHIYAN"
},
{
"cityName": "石嘴山",
"keyword": "石嘴山SHIZUISHAN"
},
{
"cityName": "双鸭山",
"keyword": "双鸭山SHUANGYASHAN"
},
{
"cityName": "朔州",
"keyword": "朔州SHUOZHOU"
},
{
"cityName": "四平",
"keyword": "四平SIPING"
},
{
"cityName": "松原",
"keyword": "松原SONGYUAN"
},
{
"cityName": "绥化",
"keyword": "绥化SUIHUA"
},
{
"cityName": "遂宁",
"keyword": "遂宁SUINING"
},
{
"cityName": "随州",
"keyword": "随州SUIZHOU"
},
{
"cityName": "宿迁",
"keyword": "宿迁SUQIAN"
},
{
"cityName": "苏州",
"keyword": "苏州SUZHOU"
},
{
"cityName": "宿州",
"keyword": "宿州SUZHOU"
}
]
},
{
"letter": "T",
"data": [
{
"cityName": "塔城",
"keyword": "塔城TACHENG"
},
{
"cityName": "漯河",
"keyword": "漯河TAHE"
},
{
"cityName": "泰安",
"keyword": "泰安TAIAN"
},
{
"cityName": "太原",
"keyword": "太原TAIYUAN"
},
{
"cityName": "泰州",
"keyword": "泰州TAIZHOU"
},
{
"cityName": "台州",
"keyword": "台州TAIZHOU"
},
{
"cityName": "唐山",
"keyword": "唐山TANGSHAN"
},
{
"cityName": "天津",
"keyword": "天津TIANJIN"
},
{
"cityName": "天水",
"keyword": "天水TIANSHUI"
},
{
"cityName": "铁岭",
"keyword": "铁岭TIELING"
},
{
"cityName": "铜川",
"keyword": "铜川TONGCHUAN"
},
{
"cityName": "通化",
"keyword": "通化TONGHUA"
},
{
"cityName": "通辽",
"keyword": "通辽TONGLIAO"
},
{
"cityName": "铜陵",
"keyword": "铜陵TONGLING"
},
{
"cityName": "铜仁",
"keyword": "铜仁TONGREN"
},
{
"cityName": "吐鲁番",
"keyword": "吐鲁番TULUFAN"
}
]
},
// {
// "letter": "U",
// "data": []
// },
// {
// "letter": "V",
// "data": []
// },
{
"letter": "W",
"data": [
{
"cityName": "潍坊",
"keyword": "潍坊WEIFANG"
},
{
"cityName": "威海",
"keyword": "威海WEIHAI"
},
{
"cityName": "渭南",
"keyword": "渭南WEINAN"
},
{
"cityName": "文山",
"keyword": "文山WENSHAN"
},
{
"cityName": "温州",
"keyword": "温州WENZHOU"
},
{
"cityName": "乌海",
"keyword": "乌海WUHAI"
},
{
"cityName": "武汉",
"keyword": "武汉WUHAN"
},
{
"cityName": "芜湖",
"keyword": "芜湖WUHU"
},
{
"cityName": "乌兰察布",
"keyword": "乌兰察布WULANCHABU"
},
{
"cityName": "乌鲁木齐",
"keyword": "乌鲁木齐WULUMUQI"
},
{
"cityName": "武威",
"keyword": "武威WUWEI"
},
{
"cityName": "无锡",
"keyword": "无锡WUXI"
},
{
"cityName": "吴忠",
"keyword": "吴忠WUZHONG"
},
{
"cityName": "梧州",
"keyword": "梧州WUZHOU"
}
]
},
{
"letter": "X",
"data": [
{
"cityName": "厦门",
"keyword": "厦门XIAMEN"
},
{
"cityName": "西安",
"keyword": "西安XIAN"
},
{
"cityName": "湘潭",
"keyword": "湘潭XIANGTAN"
},
{
"cityName": "湘西",
"keyword": "湘西XIANGXI"
},
{
"cityName": "襄阳",
"keyword": "襄阳XIANGYANG"
},
{
"cityName": "咸宁",
"keyword": "咸宁XIANNING"
},
{
"cityName": "咸阳",
"keyword": "咸阳XIANYANG"
},
{
"cityName": "孝感",
"keyword": "孝感XIAOGAN"
},
{
"cityName": "锡林郭勒",
"keyword": "锡林郭勒XILINGUOLE"
},
{
"cityName": "兴安",
"keyword": "大兴安岭DAXINGANLING"
},
{
"cityName": "兴安",
"keyword": "兴安XINGAN"
},
{
"cityName": "邢台",
"keyword": "邢台XINGTAI"
},
{
"cityName": "西宁",
"keyword": "西宁XINING"
},
{
"cityName": "新疆",
"keyword": "新疆XINJIANG"
},
{
"cityName": "新乡",
"keyword": "新乡XINXIANG"
},
{
"cityName": "信阳",
"keyword": "信阳XINYANG"
},
{
"cityName": "新余",
"keyword": "新余XINYU"
},
{
"cityName": "忻州",
"keyword": "忻州XINZHOU"
},
{
"cityName": "西双版纳",
"keyword": "西双版纳XISHUANGBANNA"
},
{
"cityName": "宣城",
"keyword": "宣城XUANCHENG"
},
{
"cityName": "许昌",
"keyword": "许昌XUCHANG"
},
{
"cityName": "徐州",
"keyword": "徐州XUZHOU"
}
]
},
{
"letter": "Y",
"data": [
{
"cityName": "雅安",
"keyword": "雅安YAAN"
},
{
"cityName": "延安",
"keyword": "延安YANAN"
},
{
"cityName": "延边",
"keyword": "延边YANBIAN"
},
{
"cityName": "盐城",
"keyword": "盐城YANCHENG"
},
{
"cityName": "阳江",
"keyword": "阳江YANGJIANG"
},
{
"cityName": "阳泉",
"keyword": "阳泉YANGQUAN"
},
{
"cityName": "扬州",
"keyword": "扬州YANGZHOU"
},
{
"cityName": "烟台",
"keyword": "烟台YANTAI"
},
{
"cityName": "宜宾",
"keyword": "宜宾YIBIN"
},
{
"cityName": "宜昌",
"keyword": "宜昌YICHANG"
},
{
"cityName": "伊春",
"keyword": "伊春YICHUN"
},
{
"cityName": "宜春",
"keyword": "宜春YICHUN"
},
{
"cityName": "伊犁",
"keyword": "伊犁YILI"
},
{
"cityName": "银川",
"keyword": "银川YINCHUAN"
},
{
"cityName": "营口",
"keyword": "营口YINGKOU"
},
{
"cityName": "鹰潭",
"keyword": "鹰潭YINGTAN"
},
{
"cityName": "益阳",
"keyword": "益阳YIYANG"
},
{
"cityName": "永州",
"keyword": "永州YONGZHOU"
},
{
"cityName": "岳阳",
"keyword": "岳阳YUEYANG"
},
{
"cityName": "玉林",
"keyword": "玉林YULIN"
},
{
"cityName": "榆林",
"keyword": "榆林YULIN"
},
{
"cityName": "运城",
"keyword": "运城YUNCHENG"
},
{
"cityName": "云浮",
"keyword": "云浮YUNFU"
},
{
"cityName": "玉树",
"keyword": "玉树YUSHU"
},
{
"cityName": "玉溪",
"keyword": "玉溪YUXI"
}
]
},
{
"letter": "Z",
"data": [
{
"cityName": "枣庄",
"keyword": "枣庄ZAOZHUANG"
},
{
"cityName": "张家界",
"keyword": "张家界ZHANGJIAJIE"
},
{
"cityName": "张家口",
"keyword": "张家口ZHANGJIAKOU"
},
{
"cityName": "张掖",
"keyword": "张掖ZHANGYE"
},
{
"cityName": "漳州",
"keyword": "漳州ZHANGZHOU"
},
{
"cityName": "湛江",
"keyword": "湛江ZHANJIANG"
},
{
"cityName": "肇庆",
"keyword": "肇庆ZHAOQING"
},
{
"cityName": "昭通",
"keyword": "昭通ZHAOTONG"
},
{
"cityName": "朝阳",
"keyword": "朝阳ZHAOYANG"
},
{
"cityName": "郑州",
"keyword": "郑州ZHENGZHOU"
},
{
"cityName": "镇江",
"keyword": "镇江ZHENJIANG"
},
{
"cityName": "中山",
"keyword": "中山ZHONGSHAN"
},
{
"cityName": "中卫",
"keyword": "中卫ZHONGWEI"
},
{
"cityName": "周口",
"keyword": "周口ZHOUKOU"
},
{
"cityName": "舟山",
"keyword": "舟山ZHOUSHAN"
},
{
"cityName": "珠海",
"keyword": "珠海ZHUHAI"
},
{
"cityName": "驻马店",
"keyword": "驻马店ZHUMADIAN"
},
{
"cityName": "株洲",
"keyword": "株洲ZHUZHOU"
},
{
"cityName": "淄博",
"keyword": "淄博ZIBO"
},
{
"cityName": "自贡",
"keyword": "自贡ZIGONG"
},
{
"cityName": "资阳",
"keyword": "资阳ZIYANG"
},
{
"cityName": "遵义",
"keyword": "遵义ZUNYI"
}
]
}
]
}
全局app.wxss
/**app.wxss**/
page {
background: #f5f5f5;
--pink: #ffc0cb;
--white: #fff;
--red: #e54d42;
--orange: #f37b1d;
--yellow: #fbbd08;
--olive: #8dc63f;
--green: #39b54a;
--grey: #8799a3;
--black: #333333;
--darkGray: #666666;
}
/* 多行文字换行 */
.line_ellipsis {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.flex-row {
display: flex;
flex-direction: row;
align-items: center;
}
.j_b {
justify-content: space-between;
}
.flex-column {
display: flex;
flex-direction: column;
align-items: center;
}
/* 遮罩 */
.mask {
position: fixed;
z-index: 1000;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.6);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
/* 单行文字换行 */
.text_ellipsis {
/*宽度自定义*/
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
/* 多行文字换行 */
.line_ellipsis {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.col {
flex-direction: column;
}
.flex {
display: flex;
align-items: flex-start;
}
/* 去掉button的默认样式*/
button {
padding: 0 !important;
background: transparent;
font-weight: normal;
}
button::after {
outline: none;
border: none;
display: none;
}
/*点击后样式*/
.button-hover {
background: transparent;
}
/* 背景图片 */
.bg_img {
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
.j_c {
justify-content: center;
}
.j_e {
justify-content: flex-end;
}
.j_a {
justify-content: space-around;
}
.flex_1 {
flex: 1;
}
.flex_0 {
flex-shrink: 0;
}
image {
vertical-align: middle;
display: inline-block;
}
.flex-wrap {
flex-wrap: wrap;
}
.mb20 {
margin-bottom: 20rpx;
}
.mb10 {
margin-bottom: 10rpx;
}