微信小程序 实现listview带字母滑动
更新时间:2017年05月12日 15:15:16 作者:kingrome2017
这篇文章主要介绍了微信小程序 实现listview带字母滑动的相关资料,需要的朋友可以参考下
微信小程序 实现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 }); },
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
相关文章
iOS13即将到来,iOS推送DeviceToken适配方案详解
这篇文章主要介绍了iOS13即将到来,iOS推送DeviceToken适配方案详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2019-09-09iOS NSNotificationCenter通知中心使用小结
IOS中经常会使用到NSNotification和delegate来进行一些类之间的消息传递,这篇文章主要介绍了iOS NSNotificationCenter使用小结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-11-11
最新评论