微信小程序实现按首字母检索城市列表

最新推荐文章于 2024-08-16 13:40:27 发布
最新推荐文章于 2024-08-16 13:40:27 发布
阅读量2k 收藏 13
点赞数 2
分类专栏： 前端语言
原文链接：https://www.cnblogs.com/xjwy/p/8317144.html
版权

不说废话，上效果图

 

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

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

 

首先，我们来看看wxml

<view class='city_box' style='{{styles}}'>
      <view class='city_left'>
          <scroll-view scroll-y style='width:100%;height:100%;' scroll-with-animation scroll-into-view='{{cityListId}}'>
              <view class='city_locate' data-types='locate' catchtap='cityTap'>
                  <text class='city_locate_title'>自动定位</text>
                  <text class='city_locate_text' style='{{!locateCity&&"color:#33b9ff;"}}'>{{locateCity||'点击定位'}}</text>
              </view>
              <view class='national' data-types='national' catchtap='cityTap'>全国</view>
              <view class='new_city'>
                  <view class='new_city_title'>热门城市</view>
                  <view class='new_city_box'>
                      <text class='new_city_text' wx:for='{{newcity}}' wx:key='this' data-types='new' catchtap='cityTap' data-val='{{item}}'>{{item}}</text>
                  </view>
              </view>
              <view class='city_list_box'>
                <block wx:for='{{citylist}}' wx:key='this' wx:for-item='letterItem' wx:for-index='letterIndex'>
                  <view class='city_first_letter' id='{{letterItem.letter}}'>{{letterItem.letter}}</view>
                  <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>
                </block>
              </view>
          </scroll-view>
      </view>
      <view class='city_right'>
          <text class='letter_item' wx:for='{{letter}}' wx:key='this' catchtap='letterTap' data-item='{{item}}'>{{item}}</text>
      </view>
  </view>

然后wxss

.city_box{
  height:100%;
  background: #fff;
  display: flex;
}
.city_left{
  flex: 1;
}
.city_right{
  width: 60rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.letter_item{
  flex: 1;
  display: block;
  font-size: 24rpx;
  color: #33B9FF;
  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;
}

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

{

"component": true

}

 

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

import qqmap from '../../utils/map.js';
Component({
  properties: {
    styles:{//这个是可以自定义最外层的view的样式
      type:String,
      value:'',
      observer: function (newval, oldval) {
        // 监听改变
        console.log(newval, oldval);
      }
    }
  },
  data: {
    //下面是字母排序
    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": "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: ''
  },
  methods: {
    //点击城市
    cityTap(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{
        console.log('还没有');
        this.getLocate();
      }
     
    },
    //点击城市字母
    letterTap(e) {
      const Item = e.currentTarget.dataset.item;
      this.setData({
        cityListId: Item
      });
      console.log(this.data.cityListId);
    },
    //调用定位
    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() });
      });
    }
  },
  ready(){
    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
      })
    }
   
    
  }
})

 

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

const wxqqmap = require('../libs/qqmap-wx-jssdk.min.js'),
      qqwxmap = new wxqqmap({
        key: 'GTDBZ-WFSRX-JOT4W-7WYBD-Z2CTO-7QBEM' // 必填，这里最好填自己申请的的
      }); 
import util from './util.js';
const qq='sdfsdf';
export default class qqmap{//获取定位信息
  getLocateInfo(){
    let that=this;
    return new Promise(function (resolve, reject) {
            that.location().then(function(val){
              //如果通过授权，那么直接使用腾讯的微信小程序sdk获取当前定位城市
              qqwxmap.reverseGeocoder({
                location: {
                  latitude: val.latitude,
                  longitude: val.longitude
                },
                success: function (res) {
                  console.log(res.result.address_component.city);
                  resolve(res.result.address_component.city);//返回城市
                },
                fail: function (res) {
                  reject(res);
                },
                complete: function (res) {
                  console.log(res);
                }
              });
                
              },function(error) {
                //如果用户拒绝了授权，那么这里会提醒他，去授权后再定位
                console.log('shibai');
                wx.showModal({
                  title: '',
                  content: '自动定位需要授权地理定位选项',
                  confirmText: '去授权',
                  success(res) {
                    if (res.confirm) {
                      wx.openSetting({
                        success(res) {
                          console.log(res);
                          that.getLocateInfo();
                        }
                      })
                    }
                  }
                })

              })
          
    })
  }
  
//定位，获取当前经纬度
  location(){   
    return new Promise(function (resolve, reject) {  
      wx.getLocation({
        altitude: true,
        success: function (res) {
          resolve(res);
        },fail(res){
          reject(res);
        }
      })
    });
    
  }  

  
}

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

{
  "usingComponents":{
    "citylist":"../../component/cityListCom/cityListCom"
  }
}

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

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

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

// pages/cityList/cityList.js
Page({
  data: {
    winHeight:0
  },
//监听传值，后面自己做处理了
  cityTap(e){
    console.log('fasdfsdfsdfds');
    console.log(e);
    const cityName=e.detail.cityname;
    wx.navigateBack();
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    const win = wx.getSystemInfoSync();
    console.log(win);
    this.setData({
      winHeight: win.windowHeight
    });
  }
})

这样就可以了。

 

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

 

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

 

 

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

 

JS里面改成这样

import qqmap from '../../utils/map.js';//这里的路径看你自己的文件路径
Page({
  data: {
    //下面是字母排序
    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": "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 {
        console.log('还没有');
        this.getLocate();
      }

    },
    //点击城市字母
    letterTap(e) {
      const Item = e.currentTarget.dataset.item;
      this.setData({
        cityListId: Item
      });
      console.log("..............."+this.data.cityListId);
    },
    //调用定位
    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
      })
    }


  }
})

然后运行就可以了

完结

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

微信小程序实战—实现城市列表的选择
yyf的博客
01-19 2万+
微信小程序实战—实现城市列表的选择 实现效果预览 实现功能简介 城市的选择 按中文/拼音/首字母条件搜索 按首字字母快速定位到城市位置 目录结构 主要代码 app.js App({ globalData: { trainBeginCity: '杭州', trainEndCity: '北京' } }) app.json {
微信小程序实现根据字母选择城市功能
08-29
主要为大家详细介绍了微信小程序中根据字母选择城市的相关方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
微信小程序实现按字母排列选择城市功能
10-15
主要介绍了微信小程序实现按字母排列选择城市功能，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
微信小程序使用vant weapp UI的van-index-bar组件实现城市列表
最新发布
m0_58571759的博客
08-16 308
其中城市列表使用了Vant 官方提供了一份默认的省市区数据。需要把这份数据整理成想要的格式，拿到城市的首字母，进行统计。index.wxml文件里直接使用即可。注意需要再json文件中声明组件。利用这个依赖包拿到首字母大写。
微信小程序中根据字母选择城市
chuti6853的博客
07-28 1342
今天开发一个小程序，里面涉及到区域选择，看了网上的一些版本，感觉写的不全，有可能是我的理解能力还不够吧。今天我就结合网上的答案，在根据自己的需求，重新整理一份。希望对大家有帮助。先看看截图： 项目截图 下面我们把代码梳理一下。 一、创建index.wxml文件 在...
微信小程序 根据拼音排序，自动锚定节点定位当前城市
神尐破
08-17 445
微信小程序 根据拼音排序，自动锚定节点，定位当前位置，如果用于品牌分类字母的 可以不引入map.jsDOM结构：`import qqmap from ‘../../utils/map.js’; //这里的路径看你自己的文件路径
微信小程序全国城市列表索引开发案例
weixin_33719619的博客
11-24 1668
在一些需求中，我们需要有一个全国城市的列表供我们选择，并且可以获得对应的经纬度坐标。 今天，我们就一起来实现这个需求。 好，我们先看一下我们期望的最终效果，如下图： 我们看到左侧有个下拉选项，右侧是供搜索的输入关键字用到的输入框。 关于搜索的需求可以看这个教程使用高德地图微信小程序SDK开发案例-输入提示（附源码） 我们今天主要实现如下需求： 1.页面布局。 2.进入页面自动定位当前所在的城市。...
详解微信小程序开发之城市选择器 城市切换
08-31
在微信小程序开发中，城市选择器是一个常见的功能，它允许用户方便地选择他们所在的或想要定位的城市。本文将深入探讨如何实现一个自定义的城市选择器，包括城市切换的逻辑和界面交互。 首先，我们需要理解页面的...
微信小程序仿美团城市选择
12-08
总的来说，这个实例展示了微信小程序中如何利用生命周期方法、数据绑定和事件处理来实现一个城市选择器，同时结合了动态计算和数据初始化，提供了一个实用且交互友好的用户体验。通过这种方式，开发者可以为自己的小...
H5首字母检索城市
09-30
这个案例的工作原理与微信小程序中的首字母检索城市相似，都是通过用户输入的城市名首字母来快速定位和筛选出相关城市。 首字母检索的核心思想是将所有城市按拼音首字母进行分类，这样用户在输入城市名的首字母时，...
微信小程序实现城市列表选择
12-10
本文实例为大家分享了小程序实现城市列表选择的具体代码，供大家参考，具体内容如下 实现效果预览   实现功能简介 城市的选择 按中文/拼音/首字母条件搜索 按首字字母快速定位到城市位置 目录结构 主要代码 app.js App({ globalData: { trainBeginCity: '杭州', trainEndCity: '北京' } }) app.json { "pages":[ "pages/index/index", "pages/citys/citys" ], "window":{ "backgroundTextStyle":"light",
微信小程序首字母搜索国家.rar
05-20
微信小程序 根据首字母查询国家，点击跳转，拿走就能用
微信小程序 实现城市名称拼音搜索框 汉字/拼音（城市区县定位模块）
Beijiyang
06-12 9499
要实现的效果展示如下 总体思路： 首先，数据中，城市对象里，包含其全拼、简拼的属性； 然后，逻辑层，找出 能与 输入框输入的字符串 相匹配的 对象； 最后，展示层，把所有匹配的城市名都渲染出来。 接下来，我们按步骤来一窥究竟。首先，是数据为了举例方便，test.js 中，我们使用简化版的数据：'use strict’ const cityList = [{ "id": "35", "provinc
基于mpvue的仿滴滴出行小程序
weixin_33827731的博客
07-02 2467
初衷本人最近一直在研究小程序，一个偶然的机会发现了mpvue框架，刚好本人对vue十分喜爱，就决定入坑了。曾经在掘金看过一个仿旧版滴滴的小程序，感觉挺不错的，但它是基于原生小程序的，所以就决定花了一段时间用mpvue进行重写。下面就开始正餐了。效果图更多效果请查看 github.com/QinZhen001/…目录结构┣━ api # 存放网络请求相关 ┣━ common ● ...
微信小程序手把手教你实现带字母索引的城市选择列表
abs625的博客
05-14 9292
微信小程序手把手教你实现带字母索引的城市选择列表前言需求分析左边可滑动列表滑动列表UI实现item点击事件右边带字母的索引条索引条从上到下分别是定位和26个大写字母索引条响应触摸和点击事件索引和列表联动尾巴 前言 在做Android和iOS应用开发的时候，我们经常在app中要用到带字母索引的城市选择功能，他们功能基本都大同小异，大概长下面的样子： 那么在微信小程序(文章后面统称小程序)中我们要怎...
小程序城市按首字母排序（如同苹果手机通讯录一样得效果）
weixin_30835649的博客
10-27 2887
如图 　　 代码 　　 1 <view class="input"> 2 <input bindinput="bindKeyInput" bindblur="bindBlur" placeholder="输入城市名或拼音查询" placeholder-style="font-size: 30rpx" value="{{inputName}}"&gt...
中国所有城市（json数据）
热门推荐
Emily
09-13 3万+
中国城市，按A-Z排序。 { "city":[ { "title":"A", "lists":[ "阿坝","阿拉善","阿里","安康","安庆","鞍山","安顺","安阳","澳门" ] }, { "title":"B", "lists":["北京","白银","保定","宝鸡","保山",...
微信小程序源码实现首字母排序功能教程
资源摘要信息: "微信小程序源码首字母排序选择" 是一款针对微信小程序开发的源码包，旨在为开发者提供一个学习和借鉴的范例。本源码包主要关注的功能是实现一个首字母排序选择的界面，这在很多应用中是非常实用的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值