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

立即下载用AI写一个

发布时间：2021-04-27

2人 | 浏览：1491次 | 收藏 |

技术：scroll-view标签

运行环境：微信开发者工具

概述

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

详细

###项目结构图：
![](/contentImages/image/20210425/QPQhsMkDAFCeujYHa3K.png)

### 第一步：导入微信开发者工具
DOM结构：
![](/contentImages/image/20210425/73onE5okqk1c4KuKjNw.png)

### 第二步：JS全部代码
`import qqmap from '../../utils/map.js'; //这里的路径看你自己的文件路径

```json
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全部样式
```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
![](/contentImages/image/20210425/eaJevLuSxDhlNWOS3Wx.png)
### 最后：随便使用↓

本实例支付的费用只是购买源码的费用，如有疑问欢迎在文末留言交流，如需作者在线代码指导、定制等，在作者开启付费服务后，可以点击“购买服务”进行实时联系，请知悉，谢谢

感谢

手机上随时阅读、收藏该文章？请扫下方二维码

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

概述

详细

相似例子推荐

评论

作者

评分详细

作者例子

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

概述

详细

相似例子推荐

评论

作者

评分详细

作者例子

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