微信小程序实现城市索引选择+搜索(附加城市js文件)

 主要效果

 源码

wxml(/img/search_icon.png和/img/add_icon.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;

}