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

不说废话，上效果图

因为我有多处要用到，所以我这里是写成自定义组件的，你也可以直接改成在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

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

微信小程序文章怎么首行缩进或取消首行缩进
很多同学问酱茄小编,微信小程序怎么让文章首行缩进或取消文章首行缩进,代码参考了大神"武当山道士",表示感谢,以下代码大家仅供学习参考. 首行缩进 .wxss 代码如下: .str1 ...
微信小程序如何段落首行缩进
微信小程序中"text"标签首行缩进会失效,换成"view"标签用text-indent:2em;可生效.
微信小程序rich-text 文本首行缩进和图片居中
微信小程序开发使用rich-text组件渲染html格式的代码,常常因为不能自定义css导致文本不能缩进,以及图片不能居中等问题,这里可以考虑使用js的replace方法,替换字符串,然后在渲染的同时 ...
微信小程序（四）：通过list列表跳转详情页
1.难点:怎么知道用户点击的是list中的哪一条数据? 方法一:在template外for循环里通过for循环的index获取将index赋值到data-studentId,data-后面的变量名是 ...
从零开始学微信小程序（初步界面制作3-文章列表）
接着我们来搞定文章列表之前咱们主页"展览"主打展示因此暂时不用考虑进一步的修改我们先来解决第二主页"展文"的界面也就是文章列表那么目前我们先尝试做一个 ...
微信小程序入门与实战(3)——阅读文章列表页面导入js模拟的数据
data/data.js var postLists = [{date: "Sep 18 2016",title: "正是虾肥蟹壮时",imgSrc: &quo ...
零基础也能学会的微信小程序制作带分享按钮的视频列表页
零基础也能学会的微信小程序制作横向滚动布局准备工作: 微信开发者工具 APPID或测试号创建一个JavaScript基本框架(如下图) 动手做起来吧~ index.wxml 学习笔记属性说明 s ...
pc 小程序获取拼音首字母排序及跳转
PC 图例:这种效果排序 1. 需要安装 js-pinyinnpm install js-pinyin2.在需要界面进行引入 import pinyin from 'js-pinyin'3.使用th ...
mpvue 微信小程序获取国家、省份、城市、区域 getLocations
methods getLocations(){let _this = thiswx.getSetting({success(res) {debugger// 判断用户是否授权过,// 未授权过.if ...

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

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

最新文章

热门文章