小编给大家分享一下微信小程序怎么实现按字母排列选择城市功能，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
成都创新互联公司"三网合一"的企业建站思路。企业可建设拥有电脑版、微信版、手机版的企业网站。实现跨屏营销，产品发布一步更新，电脑网络+移动网络一网打尽，满足企业的营销需求！成都创新互联公司具备承接各种类型的网站建设、网站设计项目的能力。经过十多年的努力的开拓，为不同行业的企事业单位提供了优质的服务，并获得了客户的一致好评。
实现效果预览
实现思想
利用小程序腾讯地图将所有城市查出来，并将其渲染至页面（https://lbs.qq.com/qqmap_wx_jssdk/index.html）（其中字母栏也根据获取到的数据变化）
其中涉及三个交互（点击字母时滚动到相应位置；滑动触摸字母时，需滚动到相应位置，并有当前哪个字母的提示，且有震动感；手动滑动页面时，需将当前对应的字母选中）
滑动触摸字母时，首先要得到所有字母所在块的高度，再平均的获取到每个字母的高度。当触摸滚动时，拿到pageY（距离文档左上角的距离，具体解释官网有https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html#touches）
计算出所有字母内容的高度，并存为一个数组
利用pageY计算出可能到达的字母位置的下标（pageY-字母栏的top值/每个字母的高度）
将计算出的下标所对应的字母内容高度赋值给scroll-top值
手动滚动列表时，根据滚动的距离计算出当前滚动的下标值，将字母数组的对应的下标值做处理
需要注意setData不能频繁使用，所以在使用的时候，需要做处理和优化
实现知识点
字母滚动到相应位置需使用scroll-view组件中的scroll-into-view 设置其子元素的id值
滑动触摸字母，需使用小程序事件touchmove事件和touchend事件
手动滑动页面时，需使用scroll-view中的scroll-top属性设置竖向滚动条位置
代码
wxml
{{key}}
{{ele.fullname}}
{{item.name}}
{{item.name}}
wxss
/* pages/findHome/selectCity/index.wxss */
.selectCity {
width: 100vw;
height: 100vh;
}
.searchCity {
height: 70rpx;
line-height: 70rpx;
width: 100%;
padding: 0 24rpx;
position: fixed;
top: 0;
left: 0;
background: #fff;
z-index: 10;
}
.cityContainer {
height: 100%;
}
.cityItem {
padding: 0 70rpx 0 24rpx;
}
.citytype {
height: 70rpx;
background: #F5F5F5;
line-height: 70rpx;
padding: 0 24rpx;
}
.cityDetail {
height: 80rpx;
line-height: 80rpx;
padding: 0 24rpx;
border-top: 1px solid #DCDCDC;
border-bottom: none;
}
.cityDetail:last-child {
border-bottom: 1px solid #DCDCDC;
}
.cityAZ {
position: fixed;
top: 136rpx;
right: 0;
font-size: 28rpx;
padding: 0 24rpx;
/* background: #fff; */
width: 40rpx;
text-align: center;
}
.AZ {
position: relative;
border-radius: 50%;
}
.activeAZ {
background: orange;
color: #fff;
}
.AZInfo {
width: 70rpx;
height: 70rpx;
border-radius: 50%;
text-align: center;
color: #fff;
line-height: 70rpx;
background: orange;
position: absolute;
left: -94rpx;
top: -14rpx;
}
.trigle {
width: 0;
height: 0;
border: 32rpx solid orange;
border-right: none;
border-top-color: transparent;
border-bottom-color: transparent;
position: absolute;
top: 4rpx;
right: -9rpx;
}js
// pages/findHome/selectCity/index.js
let cityDatas = require('../../../utils/cityData.js');
let QQMapWX = require('../../../libs/qqmap-wx-jssdk.js');
let qqmapsdk = new QQMapWX({
key: '4WKBZ-ADX36-MGNS4-E6TFJ-Q6JJE-YBF2A'
});
Page({
/**
* 页面的初始数据
*/
data: {
citys: {},//获取到的所有城市
letter: [], //获取到的所有字母
searchCity: 0,
toView: '', //点击跳转的id
scrollTop: '',
citysHeight: [],//所有字母大模块的top
azHeight: 0, //每个字母平均的高度
azTop: 0,
index: '',
activeAZ: 'A1',
touchFlag: false
},
letterClick: function (e) {
this.setData({
touchFlag: false,
toView: e.currentTarget.dataset.id
// activeAZ: e.currentTarget.dataset.id,
})
},
confrimCity() {
wx.switchTab({
url: '/pages/findHome/index',
})
},
whenTouch(e) {
let index = 0;
if((e.touches[0].pageY - this.data.azTop) % this.data.azHeight == 0){
index = (e.touches[0].pageY - this.data.azTop) / this.data.azHeight
}else {
index = parseInt((e.touches[0].pageY - this.data.azTop) / this.data.azHeight);
if(this.data.index !== index && index < this.data.letter.length) {
this.data.index = index;
this.setData({
scrollTop: this.data.citysHeight[index],
activeAZ: this.data.letter[index].id,
touchFlag: true
})
wx.vibrateShort();
}
}
},
touchEnd() {
setTimeout(()=>{
this.setData({
touchFlag: false
})
},600)
},
scroll(e) {
let scrollHeight = e.detail.scrollTop;
let index = this.calculateIndex(this.data.citysHeight, scrollHeight);
if (this.data.index !== index && index < this.data.letter.length) {
this.setData({
index: index,
activeAZ: this.data.letter[index].id,
touchFlag: false
})
}
},
calculateIndex(arr, scrollHeight) {
let index = 0;
for (let i = 0; i < arr.length; i++) {
if (scrollHeight >= arr[i - 1] && scrollHeight < arr[i]) {
index = i - 1;
break;
}else if(scrollHeight >= arr[arr.length-1]) {
index = arr.length - 1;
break;
}else if(0 < scrollHeight < arr[0]) {
index = 0
}
}
return index;
},
getSuggest(e) {
console.log(e)
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
let query = wx.createSelectorQuery();
query.select('.searchCity').boundingClientRect(rect => {
this.setData({
searchCity: rect.height
})
}).exec();
qqmapsdk.getCityList({
success: (res) => {//成功后的回调
res.result[1].forEach(ele => {
//如果城市对象中已经存在该字母开头的
if (this.data.citys[ele.pinyin[0].charAt(0).toUpperCase()]){
this.data.citys[ele.pinyin[0].charAt(0).toUpperCase()].data.push(ele);
}else {
this.data.citys[ele.pinyin[0].charAt(0).toUpperCase()] = {id: '',data: []};
this.data.citys[ele.pinyin[0].charAt(0).toUpperCase()].id = ele.pinyin[0].charAt(0).toUpperCase()+1;
this.data.citys[ele.pinyin[0].charAt(0).toUpperCase()].data.push(ele);
}
})
let newArr = Object.keys(this.data.citys).sort();
let sortCity = {};
newArr.forEach(ele => {
this.data.letter.push({name: ele, id: ele+1})
sortCity[ele] = this.data.citys[ele]
})
this.setData({
citys: sortCity,
letter: this.data.letter,
citysHeight: []
});
//获取个字母大模块的top值
query.selectAll('.cityItem').boundingClientRect((rect) => {
this.data.citysHeight = [];
rect.forEach(ele => {
this.data.citysHeight.push(ele.top - this.data.searchCity)
})
}).exec();
//获取已有字母的高度
let winH = wx.getSystemInfoSync().windowHeight;
query.select('.cityAZ').boundingClientRect((rect) => {
this.data.azHeight = rect.height / this.data.letter.length;
this.data.azTop = rect.top;
}).exec();
},
fail: function (error) {
console.error(error);
},
complete: function (res) {
}
});
this.setData({
toView: 'A1'
});
}
})以上是“微信小程序怎么实现按字母排列选择城市功能”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！
标题名称：微信小程序怎么实现按字母排列选择城市功能
文章路径：
http://cdxtjz.cn/article/gspeoh.html
