不说废话，上效果图

因为我有多处要用到，所以我这里是写成自定义组件的，你也可以直接改成在page页面编写：

布局左边一个scroll-view，显示城市列表,右边一个view显示字母列表，城市列表这边有首字母显示，给这个添加这个字母的ID，然后给右边的26个字母添加点击事件，点击的时候获取到点击的是哪个字母，给scroll-view的scroll-into-view赋值相应的字母，它左边就可以跳到相应的地方，再给scroll-view 加一个scroll-with-animation，让它跳转的时候有动画效果；

首先，我们来看看wxml

  1. <view class='city_box' style='{{styles}}'>
  2.       <view class='city_left'>
  3.           <scroll-view scroll-y style='width:100%;height:100%;' scroll-with-animation scroll-into-view='{{cityListId}}'>
  4.               <view class='city_locate' data-types='locate' catchtap='cityTap'>
  5.                   <text class='city_locate_title'>自动定位</text>
  6.                   <text class='city_locate_text' style='{{!locateCity&&"color:#33b9ff;"}}'>{{locateCity||'点击定位'}}</text>
  7.               </view>
  8.               <view class='national' data-types='national' catchtap='cityTap'>全国</view>
  9.               <view class='new_city'>
  10.                   <view class='new_city_title'>热门城市</view>
  11.                   <view class='new_city_box'>
  12.                       <text class='new_city_text' wx:for='{{newcity}}' wx:key='this' data-types='new' catchtap='cityTap' data-val='{{item}}'>{{item}}</text>
  13.                   </view>
  14.               </view>
  15.               <view class='city_list_box'>
  16.                 <block wx:for='{{citylist}}' wx:key='this' wx:for-item='letterItem' wx:for-index='letterIndex'>
  17.                   <view class='city_first_letter' id='{{letterItem.letter}}'>{{letterItem.letter}}</view>
  18.                   <text class='city_name' wx:for='{{letterItem.data}}' wx:key='this' data-types='list' catchtap='cityTap' data-index='{{index}}' data-val='{{item}}'>{{item.cityName}}</text>
  19.                 </block>
  20.               </view>
  21.           </scroll-view>
  22.       </view>
  23.       <view class='city_right'>
  24.           <text class='letter_item' wx:for='{{letter}}' wx:key='this' catchtap='letterTap' data-item='{{item}}'>{{item}}</text>
  25.       </view>
  26.   </view>

然后wxss

  1. .city_box{
  2.   height:100%;
  3.   background: #fff;
  4.   display: flex;
  5. }
  6. .city_left{
  7.   flex: 1;
  8. }
  9. .city_right{
  10.   width: 60rpx;
  11.   display: flex;
  12.   flex-direction: column;
  13.   justify-content: space-around;
  14. }
  15. .letter_item{
  16.   flex: 1;
  17.   display: block;
  18.   font-size: 24rpx;
  19.   color: #33B9FF;
  20.   text-align: center;
  21. }
  22. .city_locate,.national{
  23.   height: 80rpx;
  24.   line-height: 80rpx;
  25.   border-bottom: 1px solid #efefef;
  26.   font-size: 28rpx;
  27.   color: #333;
  28.   padding-left: 25rpx;
  29. }
  30. .city_locate_title{
  31.   color: #999;
  32.   margin-right: 20rpx;
  33. }
  34. .new_city{
  35.   background: #efefef;
  36.   font-size: 28rpx;
  37. }
  38. .new_city_title{
  39.   line-height: 50rpx;
  40.   color: #999;
  41.   padding-left: 25rpx;
  42.   margin-bottom: 20rpx;
  43. }
  44. .new_city_box{
  45.   display: flex;
  46.   flex-wrap: wrap;
  47. }
  48. .new_city_text{
  49.   width: 200rpx;
  50.   text-align: center;
  51.   line-height: 70rpx;
  52.   background: #fff;
  53.   border-radius: 35rpx;
  54.   margin:0 0 22rpx 22rpx;
  55. }
  56. .city_first_letter{
  57.   line-height: 40rpx;
  58.   height: 40rpx;
  59.   padding-left: 25rpx;
  60.   font-size: 28rpx;
  61.   background: #eee;
  62.   color: #999;
  63. }
  64. .city_name{
  65.   display: block;
  66.   line-height: 80rpx;
  67.   height: 80rpx;
  68.   border-bottom: 1px solid #efefef;
  69.   font-size: 28rpx;
  70.   color: #333;
  71.   padding-left: 25rpx;
  72. }

然后是json文件，因为我这里是组件，所以是下面这样，如果你不是的组件，那么不要这句

{
"component": true
}

最后JS，因为我这里是写的一个组件，所以是Component而不是Page

  1. import qqmap from '../../utils/map.js';
  2. Component({
  3.   properties: {
  4.     styles:{//这个是可以自定义最外层的view的样式
  5.       type:String,
  6.       value:'',
  7.       observer: function (newval, oldval) {
  8.         // 监听改变
  9.         console.log(newval, oldval);
  10.       }
  11.     }
  12.   },
  13.   data: {
  14.     //下面是字母排序
  15.     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"],
  16.     cityListId: '',
  17.     //下面是城市列表信息，这里只是模拟数据
  18.     citylist: [{ "letter": "A", "data": [{ "id": "v7", "cityName": "安徽" }] }, { "letter": "B", "data": [{ "id": "v10", "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": "张家口" }] }],
  19.     //下面是热门城市数据，模拟数据
  20.     newcity: ['北京', '上海', '广州', '深圳', '成都', '杭州'],
  21.     // citySel: '全国',
  22.     locateCity: ''
  23.   },
  24.   methods: {
  25.     //点击城市
  26.     cityTap(e) {
  27.       const val = e.currentTarget.dataset.val || '',
  28.         types = e.currentTarget.dataset.types || '',
  29.         Index = e.currentTarget.dataset.index || '',
  30.         that=this;
  31.       let city = this.data.citySel;
  32.       switch (types) {
  33.         case 'locate':
  34.           //定位内容
  35.           city = this.data.locateCity;
  36.           break;
  37.         case 'national':
  38.           //全国
  39.           city = '全国';
  40.           break;
  41.         case 'new':
  42.           //热门城市
  43.           city = val;
  44.           break;
  45.         case 'list':
  46.           //城市列表
  47.           city = val.cityName;
  48.           break;
  49.       }
  50.       if(city){
  51.         wx.setStorage({
  52.           key: 'city',
  53.           data: city
  54.         })
    　　　　//点击后给父组件可以通过bindcitytap事件，获取到cityname的值，这是子组件给父组件传值和触发事件的方法
  55.         this.triggerEvent('citytap', { cityname: city });
  56.       }else{
  57.         console.log('还没有');
  58.         this.getLocate();
  59.       }
  60.  
  61.     },
  62.     //点击城市字母
  63.     letterTap(e) {
  64.       const Item = e.currentTarget.dataset.item;
  65.       this.setData({
  66.         cityListId: Item
  67.       });
  68.       console.log(this.data.cityListId);
  69.     },
  70.     //调用定位
  71.     getLocate(){
  72.       let that=this;
  73.       new qqmap().getLocateInfo().then(function (val) {//这个方法在另一个文件里，下面有贴出代码
  74.         console.log(val);
  75.         if (val.indexOf('市') !== -1) {//这里是去掉“市”这个字
  76.           console.log(val.indexOf('市') - 1);
  77.           val = val.slice(0, val.indexOf('市'));
  78.           console.log(val);
  79.         }
  80.         that.setData({
  81.           locateCity: val
  82.         });
  83.         //把获取的定位和获取的时间放到本地存储
  84.         wx.setStorageSync('locatecity', { city: val, time: new Date().getTime() });
  85.       });
  86.     }
  87.   },
  88.   ready(){
  89.     console.log(getApp());
  90.     let that = this,
  91.         cityOrTime = wx.getStorageSync('locatecity')||{},
  92.         time = new Date().getTime(),
  93.         city='';
  94.     if (!cityOrTime.time||(time - cityOrTime.time > 1800000)){//每隔30分钟请求一次定位
  95.       this.getLocate();
  96.     }else{//如果未满30分钟，那么直接从本地缓存里取值
  97.       that.setData({
  98.         locateCity: cityOrTime.city
  99.       })
  100.     }
  101.  
  102.   }
  103. })

然后是引用的map.js，这里需要用到腾讯地图的微信小程序sdk获取当前经纬度的详情信息，然后取到当前城市，这是腾讯地图微信小程序JavaScript SDK，可以去查看教程，这里用到的是地址解析功能；

  1. const wxqqmap = require('../libs/qqmap-wx-jssdk.min.js'),
  2.       qqwxmap = new wxqqmap({
  3.         key: 'GTDBZ-WFSRX-JOT4W-7WYBD-Z2CTO-7QBEM' // 必填，这里最好填自己申请的的
  4.       });
  5. import util from './util.js';
  6. const qq='sdfsdf';
  7. export default class qqmap{//获取定位信息
  8.   getLocateInfo(){
  9.     let that=this;
  10.     return new Promise(function (resolve, reject) {
  11.             that.location().then(function(val){
  12.               //如果通过授权，那么直接使用腾讯的微信小程序sdk获取当前定位城市
  13.               qqwxmap.reverseGeocoder({
  14.                 location: {
  15.                   latitude: val.latitude,
  16.                   longitude: val.longitude
  17.                 },
  18.                 success: function (res) {
  19.                   console.log(res.result.address_component.city);
  20.                   resolve(res.result.address_component.city);//返回城市
  21.                 },
  22.                 fail: function (res) {
  23.                   reject(res);
  24.                 },
  25.                 complete: function (res) {
  26.                   console.log(res);
  27.                 }
  28.               });
  29.  
  30.               },function(error) {
  31.                 //如果用户拒绝了授权，那么这里会提醒他，去授权后再定位
  32.                 console.log('shibai');
  33.                 wx.showModal({
  34.                   title: '',
  35.                   content: '自动定位需要授权地理定位选项',
  36.                   confirmText: '去授权',
  37.                   success(res) {
  38.                     if (res.confirm) {
  39.                       wx.openSetting({
  40.                         success(res) {
  41.                           console.log(res);
  42.                           that.getLocateInfo();
  43.                         }
  44.                       })
  45.                     }
  46.                   }
  47.                 })
  48.  
  49.               })
  50.  
  51.     })
  52.   }
  53.  
  54. //定位，获取当前经纬度
  55.   location(){
  56.     return new Promise(function (resolve, reject) {
  57.       wx.getLocation({
  58.         altitude: true,
  59.         success: function (res) {
  60.           resolve(res);
  61.         },fail(res){
  62.           reject(res);
  63.         }
  64.       })
  65.     });
  66.  
  67.   }  
  68.  
  69. }

然后在引用这个组件的时候，在引用的页面的json文件里要添加这一句

  1. {
  2.   "usingComponents":{
  3.     "citylist":"../../component/cityListCom/cityListCom"
  4.   }
  5. }

然后在引用的wxml界面添加组件，styles是设置的组件的变量，我这里是可以改变组件最外层的样式，bindcitytap是上面组件js里的点击城市方法里提到的事件

  1. <citylist styles='max-height:100%;' bindcitytap='cityTap'></citylist>

然后在引用的界面的js里，写个cityTap事件，获取传过来的值

  1. // pages/cityList/cityList.js
  2. Page({
  3.   data: {
  4.     winHeight:0
  5.   },
    //监听传值，后面自己做处理了
  6.   cityTap(e){
  7.     console.log('fasdfsdfsdfds');
  8.     console.log(e);
  9.     const cityName=e.detail.cityname;
  10.     wx.navigateBack();
  11.   },
  12.   /**
  13.    * 生命周期函数--监听页面加载
  14.    */
  15.   onLoad: function (options) {
  16.     const win = wx.getSystemInfoSync();
  17.     console.log(win);
  18.     this.setData({
  19.       winHeight: win.windowHeight
  20.     });
  21.   }
  22. })

这样就可以了。

如果不想写成组件的，想直接写在一个页面里面，需要改一下

首先wxml里面去掉圈起来的这句

WXSS里面添加page{height:100%;}

JS里面改成这样

  1. import qqmap from '../../utils/map.js';//这里的路径看你自己的文件路径
  2. Page({
  3.   data: {
  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: [{ "letter": "A", "data": [{ "id": "v7", "cityName": "安徽" }] }, { "letter": "B", "data": [{ "id": "v10", "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": "张家口" }] }],
  9.     //下面是热门城市数据，模拟数据
  10.     newcity: ['北京', '上海', '广州', '深圳', '成都', '杭州'],
  11.     // citySel: '全国',
  12.     locateCity: ''
  13.   },
  14.  
  15.     //点击城市
  16.     cityTap(e) {
  17.       console.log(e)
  18.       const val = e.currentTarget.dataset.val || '',
  19.         types = e.currentTarget.dataset.types || '',
  20.         Index = e.currentTarget.dataset.index || '',
  21.         that = this;
  22.       let city = this.data.citySel;
  23.       switch (types) {
  24.         case 'locate':
  25.           //定位内容
  26.           city = this.data.locateCity;
  27.           break;
  28.         case 'national':
  29.           //全国
  30.           city = '全国';
  31.           break;
  32.         case 'new':
  33.           //热门城市
  34.           city = val;
  35.           break;
  36.         case 'list':
  37.           //城市列表
  38.           city = val.cityName;
  39.           break;
  40.       }
  41.       if (city) {
  42.         wx.setStorage({
  43.           key: 'city',
  44.           data: city
  45.         })
  46.         　　　　//点击后给父组件可以通过bindcitytap事件，获取到cityname的值，这是子组件给父组件传值和触发事件的方法
  47.         this.triggerEvent('citytap', { cityname: city });
  48.       } else {
  49.         console.log('还没有');
  50.         this.getLocate();
  51.       }
  52.  
  53.     },
  54.     //点击城市字母
  55.     letterTap(e) {
  56.       const Item = e.currentTarget.dataset.item;
  57.       this.setData({
  58.         cityListId: Item
  59.       });
  60.       console.log("..............."+this.data.cityListId);
  61.     },
  62.     //调用定位
  63.     getLocate() {
  64.       let that = this;
  65.       new qqmap().getLocateInfo().then(function (val) {//这个方法在另一个文件里，下面有贴出代码
  66.         console.log(val);
  67.         if (val.indexOf('市') !== -1) {//这里是去掉“市”这个字
  68.           console.log(val.indexOf('市') - 1);
  69.           val = val.slice(0, val.indexOf('市'));
  70.           console.log(val);
  71.         }
  72.         that.setData({
  73.           locateCity: val
  74.         });
  75.         //把获取的定位和获取的时间放到本地存储
  76.         wx.setStorageSync('locatecity', { city: val, time: new Date().getTime() });
  77.       });
  78.     },
  79.  
  80.   onShow() {
  81.     console.log(getApp());
  82.     let that = this,
  83.       cityOrTime = wx.getStorageSync('locatecity') || {},
  84.       time = new Date().getTime(),
  85.       city = '';
  86.     if (!cityOrTime.time || (time - cityOrTime.time > 1800000)) {//每隔30分钟请求一次定位
  87.       this.getLocate();
  88.     } else {//如果未满30分钟，那么直接从本地缓存里取值
  89.       that.setData({
  90.         locateCity: cityOrTime.city
  91.       })
  92.     }
  93.  
  94.   }
  95. })

然后运行就可以了

完结

想了解更多的小程序的知识请添加微信小程序开发交流群：368506119

微信小程序实现按首字母检索城市列表的更多相关文章

  1. 微信小程序rich-text 文本首行缩进和图片居中

    微信小程序开发使用rich-text组件渲染html格式的代码,常常因为不能自定义css导致文本不能缩进,以及图片不能居中等问题,这里可以考虑使用js的replace方法,替换字符串,然后在渲染的同时 ...

  2. 微信小程序- 提示不在以下合法域名列表中

    第一次开发微信小程序时在访问后台数据时总是提示 提示上面问题主要有两个原因: 1.为配置安全合法域名列表: 微信小程序在开发时需要在官网配置固定的数据来源网站: 登录小程序平台中->设置: 图中 ...

  3. 微信小程序 项目实战（三）list 列表页 及 item 详情页

    1.项目结构 2.list 列表页 (1)数据(逻辑) list.js // pages/list/list.js Page({ /** * 页面的初始数据 */ data: { title: '加载 ...

  4. 微信小程序踩坑集合

    1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...

  5. 微信小程序开发学习资料

    作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

  6. 微信小程序基础之开源项目库汇总

    awesome-github-wechat-weapp 是由OpenDigg整理并维护的微信小程序开源项目库集合.我们会定期同步OpenDigg上的项目到这里,也欢迎各位提交项目给我们. (链接:ht ...

  7. 微信小程序< 3 > ~ 微信小程序开源项目合集

    简介 移动开发者想学习微信小程序需要学习一点HTML ,CSS和JS才能够比较快速的上手,参考自己学习Android学习过程,阅读源码是一个很好的方式,所以才收集了一些WeApp的开源项目. awes ...

  8. 微信小程序学习指南

    作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

  9. 微信小程序导航：官方工具+精品教程+DEMO集合（1月7更新）

    1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=14764346784612:简易教程:https://mp.weixin.qq.com/debug ...

随机推荐

  1. NodeJs学习笔记（四）---单元测试

         sailsjs框架用了一段时间了,感觉如果功能复杂了,非常难以处理,想用一下单元测试,看是否能解决问题.     sailsjs的官方文档使用的是mocha,我搜索了一些资料,主要参考了朴灵 ...

  2. MySQL时间操作的系统函数用法

    我要查询获得当天凌晨30分的datetime值的方式:select ADDDATE(CURDATE(), INTERVAL TIME_TO_SEC(TIMEDIFF("00:30:00&qu ...

  3. SET与SPLIT

    所以说不要以为前一天考了什么后一天就不会考这类的东西了 出题人总是能竭尽所能 打破你的下限qaq naive split 详解blog来自ljz大佬:http://blog.csdn.net/ljz_ ...

  4. GAME——转圈游戏

    我们在生命的路上常常绝望 大概是因为弯路走了太多 脚上的泡被磨起又磨破 像我们所有的幻想与梦 起起落落. 所以说 我这道题考场上面和题解想得一模一样啊啊啊啊啊啊啊啊啊啊!!!!!! 但是就是打复杂了啊 ...

  5. 编译TensorFlow源码

      编译TensorFlow源码 参考: https://www.tensorflow.org/install/install_sources https://github.com/tensorflo ...

  6. Python 项目实践三（Web应用程序）第三篇

    接着上节的继续学习,现在要显示所有主题的页面 有了高效的网页创建方法,就能专注于另外两个网页了:显示全部主题的网页以及显示特定主题中条目的网页.所有主题页面显示用户创建的所有主题,它是第一个需要使用数 ...

  7. Spark 核心概念 RDD 详解

    RDD全称叫做弹性分布式数据集(Resilient Distributed Datasets),它是一种分布式的内存抽象,表示一个只读的记录分区的集合,它只能通过其他RDD转换而创建,为此,RDD支持 ...

  8. flask连接sqlalchemy数据库,实现简单的登录跳转功能

    环境:python2.7 python库:flask,flask_wtf,wtforms,sqlalchemy 原理:运行app-连接数据库-打开登录页面-输入登录信息(错误->提示错误信息:正 ...

  9. 视频流GPU解码在ffempg的实现（二）-GPU解码器

    1.gpu解码器的基本调用流程 要做视频流解码,必须要了解cuda自身的解码流,因为二者是一样的底层实现,不一样的上层调用 那cuda的解码流程是如何的呢 在https://developer.nvi ...

  10. 每天学一点Docker（3）(制作你的第一个容器)

    今天开始制作第一个容器,其实很简单 首先你要准备这些条件: 1.一个Ubuntu系统 2.这个系统能够联网,最起码ping www.baidu.com是可以的 这些准备条件准备好了,接下来就开始做准备 ...