devbox
我家小花儿
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：我家小花儿 | 2024-05-03 11:46:18

赞

踩

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

概述

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

详细

项目结构图：

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

DOM结构：

第二步：JS全部代码

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

  1.     Page({
  2.       data: {
  3.         isShow:false,
  4.         //下面是字母排序
  5.         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"],
  6.         cityListId: '',
  7.         //下面是城市列表信息，这里只是模拟数据
  8.         citylist: [{
  9.           "letter": "A",
  10.           "data": [{
  11.             "id": "v7",
  12.             "cityName": "安徽"
  13.           }]
  14.         }, {
  15.           "letter": "B",
  16.           "data": [{
  17.             "id": "v10",
  18.             "cityName": "巴中"
  19.           }, {
  20.             "id": "v4",
  21.             "cityName": "包头"
  22.           }, {
  23.             "id": "v4",
  24.             "cityName": "爆头头"
  25.           }, {
  26.             "id": "v1",
  27.             "cityName": "北京"
  28.           }]
  29.         }, {
  30.           "letter": "C",
  31.           "data": [{
  32.             "id": "v15",
  33.             "cityName": "成都"
  34.           }]
  35.         }, {
  36.           "letter": "D",
  37.           "data": [{
  38.             "id": "v21",
  39.             "cityName": "稻城"
  40.           }]
  41.         }, {
  42.           "letter": "G",
  43.           "data": [{
  44.             "id": "v17",
  45.             "cityName": "广州"
  46.           }, {
  47.             "id": "v29",
  48.             "cityName": "桂林"
  49.           }]
  50.         }, {
  51.           "letter": "H",
  52.           "data": [{
  53.             "id": "v9",
  54.             "cityName": "海南"
  55.           }, {
  56.             "id": "v3",
  57.             "cityName": "呼和浩特"
  58.           }]
  59.         }, {
  60.           "letter": "L",
  61.           "data": [{
  62.             "id": "v24",
  63.             "cityName": "洛阳"
  64.           }, {
  65.             "id": "v20",
  66.             "cityName": "拉萨"
  67.           }, {
  68.             "id": "v14",
  69.             "cityName": "丽江"
  70.           }]
  71.         }, {
  72.           "letter": "M",
  73.           "data": [{
  74.             "id": "v13",
  75.             "cityName": "眉山"
  76.           }]
  77.         }, {
  78.           "letter": "N",
  79.           "data": [{
  80.             "id": "v27",
  81.             "cityName": "南京"
  82.           }]
  83.         }, {
  84.           "letter": "S",
  85.           "data": [{
  86.             "id": "v18",
  87.             "cityName": "三亚"
  88.           }, {
  89.             "id": "v2",
  90.             "cityName": "上海"
  91.           }]
  92.         }, {
  93.           "letter": "T",
  94.           "data": [{
  95.             "id": "v5",
  96.             "cityName": "天津"
  97.           }]
  98.         }, {
  99.           "letter": "W",
  100.           "data": [{
  101.             "id": "v12",
  102.             "cityName": "乌鲁木齐"
  103.           }, {
  104.             "id": "v25",
  105.             "cityName": "武汉"
  106.           }]
  107.         }, {
  108.           "letter": "X",
  109.           "data": [{
  110.             "id": "v23",
  111.             "cityName": "西安"
  112.           }, {
  113.             "id": "v28",
  114.             "cityName": "香港"
  115.           }, {
  116.             "id": "v19",
  117.             "cityName": "厦门"
  118.           }]
  119.         }, {
  120.           "letter": "Z",
  121.           "data": [{
  122.             "id": "v8",
  123.             "cityName": "张家口"
  124.           }]
  125.         }],
  126.         //下面是热门城市数据，模拟数据
  127.         newcity: ['北京', '上海', '广州', '深圳', '成都', '杭州'],
  128.         // citySel: '全国',
  129.         locateCity: ''
  130.       },
  131.       //点击城市
  132.       cityTap(e) {
  133.         console.log(e)
  134.         const val = e.currentTarget.dataset.val || '',
  135.           types = e.currentTarget.dataset.types || '',
  136.           Index = e.currentTarget.dataset.index || '',
  137.           that = this;
  138.         let city = this.data.citySel;
  139.         switch (types) {
  140.           case 'locate':
  141.             //定位内容
  142.             city = this.data.locateCity;
  143.             break;
  144.           case 'national':
  145.             //全国
  146.             city = '全国';
  147.             break;
  148.           case 'new':
  149.             //热门城市
  150.             city = val;
  151.             break;
  152.           case 'list':
  153.             //城市列表
  154.             city = val.cityName;
  155.             break;
  156.         }
  157.         if (city) {
  158.           wx.setStorage({
  159.             key: 'city',
  160.             data: city
  161.           })
  162.           //点击后给父组件可以通过bindcitytap事件，获取到cityname的值，这是子组件给父组件传值和触发事件的方法
  163.           this.triggerEvent('citytap', {
  164.             cityname: city
  165.           });
  166.         } else {
  167.           this.getLocate();
  168.         }
  169.       },
  170.       //点击城市字母
  171.       letterTap(e) {
  172.         const Item = e.currentTarget.dataset.item;
  173.         this.setData({
  174.           cityListId: Item,
  175.           isShow:true
  176.         });
  177.         console.log("..............." + this.data.cityListId);
  178.         setTimeout(() => {
  179.           this.setData({
  180.             isShow:false
  181.           });
  182.         }, 1000);
  183.       },
  184.       //调用定位
  185.       getLocate() {
  186.         let that = this;
  187.         new qqmap().getLocateInfo().then(function (val) { //这个方法在另一个文件里，下面有贴出代码
  188.           console.log(val);
  189.           if (val.indexOf('市') !== -1) { //这里是去掉“市”这个字
  190.             console.log(val.indexOf('市') - 1);
  191.             val = val.slice(0, val.indexOf('市'));
  192.             console.log(val);
  193.           }
  194.           that.setData({
  195.             locateCity: val
  196.           });
  197.           //把获取的定位和获取的时间放到本地存储
  198.           wx.setStorageSync('locatecity', {
  199.             city: val,
  200.             time: new Date().getTime()
  201.           });
  202.         });
  203.       },
  204.       onShow() {
  205.         console.log(getApp());
  206.         let that = this,
  207.           cityOrTime = wx.getStorageSync('locatecity') || {},
  208.           time = new Date().getTime(),
  209.           city = '';
  210.         if (!cityOrTime.time || (time - cityOrTime.time > 1800000)) { //每隔30分钟请求一次定位
  211.           this.getLocate();
  212.         } else { //如果未满30分钟，那么直接从本地缓存里取值
  213.           that.setData({
  214.             locateCity: cityOrTime.city
  215.           })
  216.         }
  217.       }
  218.     })`

第三步：CSS全部样式

  1. `.css3{
  2.   transition:all 0.3s ease 0s;
  3. }
  4. .city_box {
  5.   height: 100%;
  6.   background: #fff;
  7.   display: flex;
  8. }
  9. .city_left {
  10.   flex: 1;
  11. }
  12. .city_right {
  13.   width: 60rpx;
  14.   position: fixed;
  15.   right: 0rpx;
  16. }
  17. .letter_item {
  18.   display: block;
  19.   font-size: 24rpx;
  20.   color: #33B9FF;
  21.   height: 40rpx;
  22.   text-align: center;
  23. }
  24. .city_locate,
  25. .national {
  26.   height: 80rpx;
  27.   line-height: 80rpx;
  28.   border-bottom: 1px solid #efefef;
  29.   font-size: 28rpx;
  30.   color: #333;
  31.   padding-left: 25rpx;
  32. }
  33. .city_locate_title {
  34.   color: #999;
  35.   margin-right: 20rpx;
  36. }
  37. .new_city {
  38.   background: #efefef;
  39.   font-size: 28rpx;
  40. }
  41. .new_city_title {
  42.   line-height: 50rpx;
  43.   color: #999;
  44.   padding-left: 25rpx;
  45.   margin-bottom: 20rpx;
  46. }
  47. .new_city_box {
  48.   display: flex;
  49.   flex-wrap: wrap;
  50. }
  51. .new_city_text {
  52.   width: 200rpx;
  53.   text-align: center;
  54.   line-height: 70rpx;
  55.   background: #fff;
  56.   border-radius: 35rpx;
  57.   margin: 0 0 22rpx 22rpx;
  58. }
  59. .city_first_letter {
  60.   line-height: 40rpx;
  61.   height: 40rpx;
  62.   padding-left: 25rpx;
  63.   font-size: 28rpx;
  64.   background: #eee;
  65.   color: #999;
  66. }
  67. .city_name {
  68.   display: block;
  69.   line-height: 80rpx;
  70.   height: 80rpx;
  71.   border-bottom: 1px solid #efefef;
  72.   font-size: 28rpx;
  73.   color: #333;
  74.   padding-left: 25rpx;
  75. }
  76. .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;
  77. }
  78.   .letter.hide{  
  79.     transform:scale(0);
  80.   }
  81. .letter.show{  
  82.   transform:scale(1);
  83. }
  84. `

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

最后：随便使用↓

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/529466
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号