小程序实现按字母排列选择城市
程序员文章站
2024-03-11 12:03:31
...
小程序实现按字母排列选择城市
实现效果预览
实现思想
- 利用小程序腾讯地图将所有城市查出来,并将其渲染至页面(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
<!--pages/findHome/selectCity/index.wxml-->
<view class="selectCity">
<view class="searchCity">
<input placeholder="输入城市名进行搜索" bindinput="getSuggest" bindfocus="inputFocus"></input>
</view>
<view class="cityContainer" style="padding-top: {{searchCity}}px">
<scroll-view scroll-y="true" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}" bindscroll="scroll" style="height: 100%" scroll-with-animation="ture">
<block wx:for="{{citys}}" wx:for-index="key" wx:for-item="value" wx:key="key">
<view class="cityItem">
<view class="citytype" id="{{value.id}}">{{key}}</view>
<block wx:for="{{value.data}}" wx:for-key="i" wx:for-item="ele" wx:key="i">
<view class="cityDetail" data-name="{{ele.fullname}}" bindtap="confrimCity">{{ele.fullname}}</view>
</block>
</view>
</block>
</scroll-view>
<view class="cityAZ">
<block wx:for="{{letter}}" wx:key="{{id}}">
<view bindtap="letterClick" class="AZ {{!touchFlag && activeAZ == item.id ? 'activeAZ' : ''}}" data-id="{{item.id}}" catchtouchmove="whenTouch" catchtouchend="touchEnd" id="{{item.id}}">{{item.name}}
<view class="AZInfo" wx:if="{{touchFlag && activeAZ == item.id}}">
{{item.name}}
<view class="trigle"></view>
</view>
</view>
</block>
</view>
</view>
</view>
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'
});
}
})