微信小程序 根据拼音排序，自动锚定节点定位当前城市

节点定位当前城市"/>

微信小程序 根据拼音排序，自动锚定节点定位当前城市

概述

微信小程序 根据拼音排序，自动锚定节点，定位当前位置，如果用于品牌分类字母的 可以不引入map.js

详细

项目结构图：

第一步：导入微信开发者工具

DOM结构：

第二步：JS全部代码

`import qqmap from ‘../../utils/map.js’; //这里的路径看你自己的文件路径

    Page({data: {isShow:false,//下面是字母排序letter: ["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"],cityListId: '',//下面是城市列表信息，这里只是模拟数据citylist: [{"letter": "A","data": [{"id": "v7","cityName": "安徽"}]}, {"letter": "B","data": [{"id": "v10","cityName": "巴中"}, {"id": "v4","cityName": "包头"}, {"id": "v4","cityName": "爆头头"}, {"id": "v1","cityName": "北京"}]}, {"letter": "C","data": [{"id": "v15","cityName": "成都"}]}, {"letter": "D","data": [{"id": "v21","cityName": "稻城"}]}, {"letter": "G","data": [{"id": "v17","cityName": "广州"}, {"id": "v29","cityName": "桂林"}]}, {"letter": "H","data": [{"id": "v9","cityName": "海南"}, {"id": "v3","cityName": "呼和浩特"}]}, {"letter": "L","data": [{"id": "v24","cityName": "洛阳"}, {"id": "v20","cityName": "拉萨"}, {"id": "v14","cityName": "丽江"}]}, {"letter": "M","data": [{"id": "v13","cityName": "眉山"}]}, {"letter": "N","data": [{"id": "v27","cityName": "南京"}]}, {"letter": "S","data": [{"id": "v18","cityName": "三亚"}, {"id": "v2","cityName": "上海"}]}, {"letter": "T","data": [{"id": "v5","cityName": "天津"}]}, {"letter": "W","data": [{"id": "v12","cityName": "乌鲁木齐"}, {"id": "v25","cityName": "武汉"}]}, {"letter": "X","data": [{"id": "v23","cityName": "西安"}, {"id": "v28","cityName": "香港"}, {"id": "v19","cityName": "厦门"}]}, {"letter": "Z","data": [{"id": "v8","cityName": "张家口"}]}],//下面是热门城市数据，模拟数据newcity: ['北京', '上海', '广州', '深圳', '成都', '杭州'],// citySel: '全国',locateCity: ''},//点击城市cityTap(e) {console.log(e)const val = e.currentTarget.dataset.val || '',types = e.currentTarget.dataset.types || '',Index = e.currentTarget.dataset.index || '',that = this;let city = this.data.citySel;switch (types) {case 'locate'://定位内容city = this.data.locateCity;break;case 'national'://全国city = '全国';break;case 'new'://热门城市city = val;break;case 'list'://城市列表city = val.cityName;break;}if (city) {wx.setStorage({key: 'city',data: city})//点击后给父组件可以通过bindcitytap事件，获取到cityname的值，这是子组件给父组件传值和触发事件的方法this.triggerEvent('citytap', {cityname: city});} else {this.getLocate();}},//点击城市字母letterTap(e) {const Item = e.currentTarget.dataset.item;this.setData({cityListId: Item,isShow:true});console.log("..............." + this.data.cityListId);setTimeout(() => {this.setData({isShow:false});}, 1000);},//调用定位getLocate() {let that = this;new qqmap().getLocateInfo().then(function (val) { //这个方法在另一个文件里，下面有贴出代码console.log(val);if (val.indexOf('市') !== -1) { //这里是去掉“市”这个字console.log(val.indexOf('市') - 1);val = val.slice(0, val.indexOf('市'));console.log(val);}that.setData({locateCity: val});//把获取的定位和获取的时间放到本地存储wx.setStorageSync('locatecity', {city: val,time: new Date().getTime()});});},onShow() {console.log(getApp());let that = this,cityOrTime = wx.getStorageSync('locatecity') || {},time = new Date().getTime(),city = '';if (!cityOrTime.time || (time - cityOrTime.time > 1800000)) { //每隔30分钟请求一次定位this.getLocate();} else { //如果未满30分钟，那么直接从本地缓存里取值that.setData({locateCity: cityOrTime.city})}}})`

第三步：CSS全部样式

`.css3{transition:all 0.3s ease 0s;
}
.city_box {height: 100%;background: #fff;display: flex;
}
.city_left {flex: 1;
}
.city_right {width: 60rpx;position: fixed;right: 0rpx;
}
.letter_item {display: block;font-size: 24rpx;color: #33B9FF;height: 40rpx;text-align: center;
}
.city_locate,
.national {height: 80rpx;line-height: 80rpx;border-bottom: 1px solid #efefef;font-size: 28rpx;color: #333;padding-left: 25rpx;
}
.city_locate_title {color: #999;margin-right: 20rpx;
}
.new_city {background: #efefef;font-size: 28rpx;
}
.new_city_title {line-height: 50rpx;color: #999;padding-left: 25rpx;margin-bottom: 20rpx;
}
.new_city_box {display: flex;flex-wrap: wrap;
}
.new_city_text {width: 200rpx;text-align: center;line-height: 70rpx;background: #fff;border-radius: 35rpx;margin: 0 0 22rpx 22rpx;
}
.city_first_letter {line-height: 40rpx;height: 40rpx;padding-left: 25rpx;font-size: 28rpx;background: #eee;color: #999;
}
.city_name {display: block;line-height: 80rpx;height: 80rpx;border-bottom: 1px solid #efefef;font-size: 28rpx;color: #333;padding-left: 25rpx;
}
.letter{  width: 100rpx; height: 100rpx; background:#ffffff; box-shadow:0px 2px 5px #D9D9D9, 1px 2px 5px #333333; position: fixed;  top: 50%; left: 50%; margin: -50rpx 0 0 -50rpx;  text-align: center; line-height: 100rpx;
}.letter.hide{  transform:scale(0);}
.letter.show{  transform:scale(1);
}
`

第四步：配置接口地址config.js

最后：随便使用↓