先给大家上效果图：
想上传视频给你们看整体效果的，看了一下好麻烦哦~
接下来进入正题：文件目录图
废话不多说直接上代码了啊~
city.js文件里是一些配置数据，你们也可以直接写在组件的js文件data里，只是为了给你展示一下，这些城市列表数据按理来说应该都是后端给你返回的，城市列表的首字母展示不一定就是26个字母，也可以根据已有的城市首字母去展示。
// city.js let citylist = [{"letter": "A", "data": [{"cityId": "v7", "cityName": "安徽" }] }, {"letter": "B", "data": [{"cityId": "v10", "cityName": "巴中" }, {"cityId": "v4", "cityName": "包头" }, {"cityId": "v1", "cityName": "北京" }] }, {"letter": "C", "data": [{"cityId": "v15", "cityName": "成都" }] }, {"letter": "D", "data": [{"cityId": "v21", "cityName": "稻城" }] }, {"letter": "G", "data": [{"cityId": "v17", "cityName": "广州" }, {"cityId": "v29", "cityName": "桂林" }] }, {"letter": "H", "data": [{"cityId": "v9", "cityName": "海南" }, {"cityId": "v3", "cityName": "呼和浩特" }] }, {"letter": "L", "data": [{"cityId": "v24", "cityName": "洛阳" }, {"cityId": "v20", "cityName": "拉萨" }, {"cityId": "v14", "cityName": "丽江" }] }, {"letter": "M", "data": [{"cityId": "v13", "cityName": "眉山" }] }, {"letter": "N", "data": [{"cityId": "v27", "cityName": "南京" }] }, {"letter": "S", "data": [{"cityId": "v18", "cityName": "三亚" }, {"cityId": "v2", "cityName": "上海" }] }, {"letter": "T", "data": [{"cityId": "v5", "cityName": "天津" }] }, {"letter": "W", "data": [{"cityId": "v12", "cityName": "乌鲁木齐" }, {"cityId": "v25", "cityName": "武汉" }] }, {"letter": "X", "data": [{"cityId": "v23", "cityName": "西安" }, {"cityId": "v28", "cityName": "香港" }, {"cityId": "v19", "cityName": "厦门" }] }, {"letter": "Z", "data": [{"cityId": "v8", "cityName": "张家口" }] }]let hotCity = [{"cityId": "v1", "cityName": "北京" }, {"cityId": "v2", "cityName": "上海" }, {"cityId": "v27", "cityName": "南京" }, {"cityId": "v15", "cityName": "成都" }, {"cityId": "v17", "cityName": "广州" }, {"cityId": "v25", "cityName": "武汉" }, {"cityId": "v19", "cityName": "厦门" }]let letter = ["hot","A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]// 获取所有城市列表function cityRes(cityName) {let allcity = [];citylist.forEach(v => {v.data.forEach(v1 => {allcity.push(v1) })})let cityRes = allcity.filter(v => {if (v.cityName.includes(cityName)) {return v;}});return cityRes}module.exports = {citylist,hotCity,letter,cityRes}
在微信小程序里创建components文件，把我们的城市列表（citylist）组件文件放在此下面。
下面展citylist.js基本所以逻辑都在这里了,城市的定位可以去使用腾讯地图微信小程序sdk（qqmapsdk），或者你们有别的方法也可以使用，这里不多赘述。
// citylist.jsimport city from "../../utils/city.js"Component({/*** 组件的属性列表*/properties: {},/*** 组件的初始数据*/data: {hidden: true,showCity: true,cityData: {},},lifetimes: {attached: function () {// 在组件实例进入页面节点树时执行this.setData({cityData: city})},detached: function () {// 在组件实例被从页面节点树移除时执行},},/*** 组件的方法列表*/methods: {// 输入事件inputTap(e) {let keywords = e.detail.value;this.setData({keywords,showCity: false})let cityRes = city.cityRes(keywords)this.setData({cityRes,})},// 输入框回车搜索事件confirmTap(e) {let keywords = e.detail.value;this.setData({keywords,showCity: false})let cityRes = city.cityRes(keywords)this.setData({cityRes,})},//选择城市selectCity: function (e) {var dataset = e.currentTarget.dataset;let usualData = this.data.usualData;wx.showToast({icon: "none",title: dataset.cityname,})},touchstart: function (e) {this.setData({index: e.currentTarget.dataset.index,Mstart: e.changedTouches[0].pageX});},touchmove: function (e) {var history = this.data.historyList;var move = this.data.Mstart - e.changedTouches[0].pageX;history[this.data.index].x = move > 0 ? -move : 0;this.setData({historyList: history});},touchend: function (e) {var history = this.data.historyList;var move = this.data.Mstart - e.changedTouches[0].pageX;history[this.data.index].x = move > 100 ? -180 : 0;this.setData({historyList: history});},//获取文字信息getPy: function (e) {this.setData({hidden: false,showPy: e.target.id,})},setPy: function (e) {this.setData({hidden: true,scrollTopId: this.data.showPy})},//滑动选择城市tMove: function (e) {var y = e.touches[0].clientY,offsettop = e.currentTarget.offsetTop;//判断选择区域,只有在选择区才会生效if (y > offsettop) {var num = parseInt((y - offsettop) / 12);this.setData({showPy: this.data._py[num]})};},//触发全部开始选择tStart: function () {this.setData({hidden: false})},//触发结束选择tEnd: function () {this.setData({hidden: true,scrollTopId: this.data.showPy})},// 输入框删除icon事件delTap() {this.setData({keywords: "",showCity: true,})},}})
下面展示citylist.wxml。
<!--components/citylist/citylist.wxml--><!--pages/citylist/citylist.wxml--><view class="city-body"><!-- 搜索城市 --><view class="search-bar"><view class="search-row"><view class="input-box"><image src="/images/search.png"></image><input placeholder="请输入城市名称查询" confirm-type="search" bindinput="inputTap" bindconfirm="confirmTap" value="{{keywords}}"></input><image src="/images/cancel.png" bindtap="delTap"></image></view><!-- <text bindtap="searchCity">搜索</text> --></view></view><!-- 城市列表 --><view class='list-city' wx:if="{{showCity}}"><scroll-view scroll-y="true" style="height:100%;" scroll-into-view="{{scrollTopId}}" scroll-with-animation="true" enable-back-to-top="true"><view class='item'><view class='py'>当前定位</view><view class="dw-style" data-citycode="{{dwcitycode}}" bindtap='{{dwcity?"selectCity":""}}'><image src="/images/location.png"></image><text style="color:{{dwcity?'':'#aaa'}}">{{dwcity?dwcity:'正在定位'}}</text></view></view><!-- 热门城市 --><view class='item' style="padding-bottom:25rpx;"><view class='py' id="hot">★ 热门城市</view><view class="fullname hot-city" wx:for="{{cityData.hotCity}}" wx:key="key" data-cityname="{{item.cityName}}" data-cityid="{{item.cityId}}" bindtap='selectCity'>{{item.cityName}}</view></view><!-- 全部 --><view class='item' wx:for="{{cityData.citylist}}" wx:for-index="idx" wx:for-item="group" wx:key="key"><view class='py' id="{{group.letter}}">{{group.letter}}</view><view class="fullname" wx:for="{{group.data}}" wx:key="key" data-cityname="{{item.cityName}}" data-cityid="{{item.cityId}}" bindtap='selectCity'>{{item.cityName}}</view></view></scroll-view><!-- 首字母 --><view class='city-py' bindtouchstart="tStart" bindtouchend="tEnd" catchtouchmove="tMove"><view wx:for="{{cityData.letter}}" wx:key="key" bindtouchstart="getPy" bindtouchend="setPy" id="{{item}}">{{item == 'hot' ? "★" : item}}</view></view></view><!-- 搜索结果 --><scroll-view scroll-y="true" style="height:100%;" class="searchRes" wx:else><view wx:if="{{cityRes!='' && keywords!=''}}"><view class="restitle">搜索结果</view><view class="fullname" wx:for="{{cityRes}}" wx:key="key" data-cityname="{{item.cityName}}" data-cityid="{{item.cityId}}" bindtap='selectCity'>{{item.cityName}}</view></view><view class="no-city" wx:if="{{keywords && cityRes==''}}"><image src="/images/nocity.png"></image><text>没有找到相关城市</text></view><!-- <view >没有找到相关城市</view> --></scroll-view></view><!--选择显示--><view hidden="{{hidden}}" class="showPy">{{showPy == 'hot' ? "★" : showPy}}</view>
下面展示一些citylist.wxss。
/* pages/citylist/citylist.wxss */page {height: 91.5%;}.city-body {/* padding-top: 92rpx; */box-sizing: border-box;height: 100%;}/* 定位城市 */.dw-style {display: flex;align-items: center;padding: 25rpx;}.dw-style image {width: 55rpx;height: 55rpx;margin-right: 10rpx;}.dw-style text {font-size: 30rpx;color: #555;}/* 搜索城市 */.search-bar {width: 100%;height: 110rpx;line-height: 100rpx;top: 0;box-sizing: border-box;overflow: hidden;padding: 20rpx;position: relative;}.search-row {display: flex;align-items: center;}.search-row text {font-size: 28rpx;font-family: PingFang SC;font-weight: 500;line-height: 40rpx;color: rgba(20, 20, 20, 1);opacity: 1;margin-left: 30rpx;}.input-box {height: 62rpx;/* background: #f5f5f5; */opacity: 1;border-radius: 32rpx;padding: 5rpx 10rpx;display: flex;align-items: center;font-size: 28rpx;flex: 1;border: 1rpx solid rgb(73, 157, 235);}.input-box image {width: 55rpx;height: 55rpx;margin: 0 10rpx;}.input-box input {flex: 1;height: 62rpx;}.list-detail,.list-city {width: 100%;height: 100%;overflow-y: auto;background: #fff;}.list-detail .item-nav {border-bottom: 1rpx solid #eee;}.list-detail .title,.history .title {font-size: 32rpx;color: #000;line-height: 45rpx;}.list-detail .address,.history .address {font-size: 28rpx;color: #aaa;white-space: normal;}/* 搜索结果 */.searchRes .restitle {background: #eee;font-size: 25rpx;color: #aaa;padding: 12rpx 25rpx;}.citytext {box-sizing: border-box;font-size: 30rpx;color: #555;padding: 25rpx;border-bottom: 1rpx solid #eee;}.no-city {display: flex;flex-direction: column;align-items: center;justify-content: center;margin-top: 255rpx;}.no-city image {width: 298rpx;height: 226rpx;}.no-city text {font-size: 28rpx;font-family: PingFang SC;font-weight: 500;line-height: 40rpx;color: rgba(167, 166, 166, 1);opacity: 1;margin-top: 25rpx;}/* 城市列表 */.list-city {position: relative;}.py {box-sizing: border-box;background: #f5f5f5;font-size: 23rpx;color: #aaa;padding: 10rpx 25rpx;}.fullname {box-sizing: border-box;font-size: 30rpx;color: #555;padding: 25rpx;border-bottom: 1rpx solid #eee;}.city-py {position: fixed;top: 21%;right: 0;/* margin-top: -360rpx; */}.city-py view {font-size: 25rpx;width: 60rpx;height: 37rpx;line-height: 37rpx;text-align: center;/* color: #555; */color: rgb(73, 157, 235);}.showPy {width: 150rpx;height: 150rpx;background: #fff;border-radius: 15rpx;line-height: 150rpx;text-align: center;font-size: 80rpx;margin: auto;position: absolute;top: 0;left: 0;bottom: 0;right: 0;z-index: 3;/* color: #333; */color: rgb(73, 157, 235);box-shadow: 0 0 150rpx rgba(0, 0, 0, 0.35);}.hot-city {border: 1rpx solid #eee;display: inline-block;margin: 25rpx 0 0 22rpx;padding: 10rpx 0rpx;font-size: 25rpx;border-radius: 6rpx;width: 118rpx;text-align: center;}
然后在你需要的页面直接引入
// 在json文件里{"usingComponents": {"city-list":"/components/citylist/citylist"},"navigationBarBackgroundColor":"#82b8db","navigationBarTextStyle":"white","navigationBarTitleText":"城市列表"}// 在wxml里<city-list></city-list>
如果有任何不明白的地方可以评论告诉我哦~ 我觉得大家一般也不想听分析吧（(/ω＼)捂脸）如果有大佬觉得哪里有可以改进的地方，也请大佬多多指教哦~
微信小程序-根据城市首字母定位城市列表（包含搜索和热门城市）已封装成组件可以直接用
