微信小程序怎么实现按字母排列选择城市功能 - 行业资讯

　　介绍

小编给大家分享一下微信小程序怎么实现按字母排列选择城市功能,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!

实现效果预览

<强>实现思想

利用小程序腾讯地图将所有城市查出来,并将其渲染至页面(https://lbs.qq.com/qqmap_wx_jssdk/index.html)(其中字母栏也根据获取到的数据变化)

其中涉及三个交互(点击字母时滚动到相应位置;滑动触摸字母时,需滚动到相应位置,并有当前哪个字母的提示,且有震动感;手动滑动页面时,需将当前对应的字母选中)

滑动触摸字母时,首先要得到所有字母所在块的高度,再平均的获取到每个字母的高度。当触摸滚动时,拿到pageY(距离文档左上角的距离,具体解释官网有https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html触摸)

计算出所有字母内容的高度,并存为一个数组

利用pageY计算出可能到达的字母位置的下标(pageY -字母栏的顶部值/每个字母的高度)

将计算出的下标所对应的字母内容高度赋值给scroll-top值

手动滚动列表时,根据滚动的距离计算出当前滚动的下标值,将字母数组的对应的下标值做处理

需要注意setData不能频繁使用,所以在使用的时候,需要做处理和优化

<强>实现知识点

字母滚动到相应位置需使用滚动视图组件中的scroll-into-view设置其子元素的id值

滑动触摸字母,需使用小程序事件touchmove事件和touchend事件

手动滑动页面时,需使用滚动视图中的scroll-top属性设置竖向滚动条位置

<强>代码

wxml

, & lt; !——页面/findHome/selectCity/index.wxml——比; 　　& lt; view 类=皊electCity"祝辞　　,& lt; view 类=皊earchCity"比; 　　,& lt; input 占位符=笆淙氤鞘忻兴阉鳌?bindinput=癵etSuggest", bindfocus=癷nputFocus"祝辞& lt;/input> 　　,& lt;/view> 　　,& lt; view 类=癱ityContainer",在　　,& lt; scroll-view scroll-y=皌rue", scroll-into-view=皗{要查看}}“,scroll-top=皗{scrollTop}}“, bindscroll=皊croll",, scroll-with-animation=皌ure"比; 　　,& lt; block wx:=皗{北京市}},,天气:对于指数=発ey",天气:项=皏alue",天气:关键=発ey"比; 　　,& lt; view 类=癱ityItem"比; 　　& lt;才能view 类=癱itytype", id=皗{value.id}}“在{{关键}}& lt;/view> 　　& lt;才能block 天气:为=皗{value.data}},,天气:关键=拔?天气:项=癳le",天气:关键=拔冶? 　　& lt;才能view 类=癱ityDetail",数据对象名称=皗{ele.fullname}}“, bindtap=癱onfrimCity"在{{ele.fullname}} & lt;/view> 　　& lt;才能/block> 　　,& lt;/view> 　　& lt;/block>大敌; 　　& lt;/scroll-view>大敌; 　　,& lt; view 类=癱ityAZ"比; 　　,& lt; block wx:=皗{信}},,天气:关键=皗{id}}“比; 　　,& lt; view bindtap=發etterClick",类=癆Z {{! touchFlag ,,, activeAZ ==, item.id ?, & # 39; activeAZ& # 39;,:, & # 39; & # 39;}}“,数据id=皗{item.id}}“, catchtouchmove=皐henTouch", catchtouchend=皌ouchEnd", id=皗{item.id}}“在{{item.name}} 　　,& lt; view 类=癆ZInfo",天气:如果=皗{touchFlag ,,, activeAZ ==, item.id}}“比; 　　,,{{item.name}} 　　& lt;才能view 类=皌rigle"祝辞& lt;/view> 　　,& lt;/view> 　　,& lt;/view> 　　,& lt;/block> 　　,& lt;/view> 　　,& lt;/view> 　　& lt;/view>

wxs

/*,页面/findHome selectCity/index.wxss */.selectCity { 　　,宽度:100大众; 　　,身高:100 vh; 　　} 　　.searchCity { 　　,身高:70 rpx; 　　,行高:70 rpx; 　　,宽度:100%; 　　,填充:0,24 rpx; 　　位置:大敌;固定; 　　,上图:0; 　　,左:0; 　　,背景:# fff; 　　,z - index: 10; 　　} 　　.cityContainer { 　　,高度:100%; 　　} 　　.cityItem { 　　,填充:0,70 rpx 0, 24 rpx; 　　} 　　.citytype { 　　,身高:70 rpx; 　　,背景:# F5F5F5; 　　,行高:70 rpx; 　　,填充:0,24 rpx; 　　　　} 　　.cityDetail { 　　,身高:80 rpx; 　　,行高:80 rpx; 　　,填充:0,24 rpx; 　　,border-top: 1 px solid # DCDCDC; 　　,边界底部:没有; 　　} 　　.cityDetail: last-child { 　　,边界底部:1 px solid # DCDCDC; 　　} 　　.cityAZ { 　　位置:大敌;固定; 　　,最高:136 rpx; 　　,右:0; 　　,字体大小:28 rpx; 　　,填充:0,24 rpx; 　　,/*背景:# fff; */,宽度:40 rpx; 　　,text-align:中心; 　　} 　　.AZ { 　　,位置:相对; 　　,这个特性:50%; 　　} 　　.activeAZ { 　　,背景:橙色; 　　,颜色:# fff; 　　} 　　.AZInfo { 　　,宽度:70 rpx; 　　,身高:70 rpx; 　　,这个特性:50%; 　　,text-align:中心; 　　,颜色:# fff; 　　,行高:70 rpx; 　　,背景:橙色; 　　,位置:绝对; 　　-94年,左:rpx; 　　,最高:-14 rpx; 　　} 　　.trigle { 　　,宽度:0; 　　,高度:0; 　　,边界:32 rpx solid 橙色; 　　,边境:没有; 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null