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

概述

微信小程序 根据拼音排序，自动锚定节点，定位当前位置，如果用于品牌分类字母的 可以不引入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

最后：随便使用↓