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