微信小程序实现按首字母检索城市列表
不说废话，上效果图
因为我有多处要用到，所以我这里是写成自定义组件的，你也可以直接改成在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
