微信小程序 实现listview带字母滑动
程序员文章站
2023-12-22 20:22:28
微信小程序 实现listview带字母滑动
wxml
微信小程序 实现listview带字母滑动
wxml
<!--字母滑动--> <view class="letter-position" wx:if="{{filtertype == 'name'}}" hidden="{{lettershow?'true':''}}" style="z-index:{{zindex}}" catchtouchstart="handleralphatap" catchtouchmove="handlermove" catchtouchend="handlerend"> <image class="no-stars star-icon" data-loc="star" src="../img/no-stars.png"></image> <text class="letter" wx:for="{{groups}}" wx:for-item="group" data-loc="{{group.id}}" wx:key="l_{{group.id}}"> {{group.id}} </text> <text class="letter no-letter"> # </text> </view>
<scroll-view scroll-into-view="{{locationto}}" bindscrolltolower="onscrolllower" scroll-y="{{trues}}" style="height: {{clientheihgt?clientheihgt+'px':'auto'}}" bindscroll="scroll" scroll-top="{{scrolltop}}" hidden="{{favoritecards.length==0 && starcards.length ==0}}">
js
handleralphatap(e) { var ap = e.target.dataset.loc; //字母 this.setdata({ locationto: ap }); var list = this.data.groups; this.offsettop = (this.data.clientheihgt - list.length * 16) / 2; }, handlermove(e) { var _this = this; var list = this.data.groups; var movey = e.touches[0].clienty; var ry = movey - this.offsettop; if (ry >= 0) { var index = math.ceil((ry - 16) / 16); if (0 <= index && index < list.length) { _this.setdata({ locationto: list[index].id, nonwapid: list[index].id, fly: false, //nonwap: list[index] }); // _this.setdata({ // nonwapid:_this.data.nonwap.id // }); } } }, handlerend(e) { // try{ this.setdata({ nonwapid: '', fly: true, // locationto:this.data.nonwap.id }); // }catch(e){ // } var _this = this; this.setdata({ scottttp: e.currenttarget.dataset.scrolltop }); },
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!