微信小程序实现按字母排列选择城市功能

2023-08-07 11:33:04 64

实现效果预览

实现思想

利用小程序腾讯地图将所有城市查出来，并将其渲染至页面（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:024rpx;
position:fixed;
top:0;
left:0;
background:#fff;
z-index:10;
}
.cityContainer{
height:100%;
}
.cityItem{
padding:070rpx024rpx;
}
.citytype{
height:70rpx;
background:#F5F5F5;
line-height:70rpx;
padding:024rpx;

}
.cityDetail{
height:80rpx;
line-height:80rpx;
padding:024rpx;
border-top:1pxsolid#DCDCDC;
border-bottom:none;
}
.cityDetail:last-child{
border-bottom:1pxsolid#DCDCDC;
}
.cityAZ{
position:fixed;
top:136rpx;
right:0;
font-size:28rpx;
padding:024rpx;
/*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:32rpxsolidorange;
border-right:none;
border-top-color:transparent;
border-bottom-color:transparent;
position:absolute;
top:4rpx;
right:-9rpx;
}

//pages/findHome/selectCity/index.js
letcityDatas=require('../../../utils/cityData.js');
letQQMapWX=require('../../../libs/qqmap-wx-jssdk.js');
letqqmapsdk=newQQMapWX({
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){
letindex=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.setData({
touchFlag:false
})
},600)
},
scroll(e){
letscrollHeight=e.detail.scrollTop;
letindex=this.calculateIndex(this.data.citysHeight,scrollHeight);
if(this.data.index!==index&&index=arr[i-1]&&scrollHeight=arr[arr.length-1]){
index=arr.length-1;
break;
}elseif(0{
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);
}
})
letnewArr=Object.keys(this.data.citys).sort();
letsortCity={};
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();

//获取已有字母的高度
letwinH=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'
});

}
})

总结

以上所述是小编给大家介绍的微信小程序实现按字母排列选择城市，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

微信小程序实现按字母排列选择城市功能

热门推荐

随机推荐