微信小程序 實現(xiàn)listview帶字母滑動
更新時間:2017年05月12日 15:15:16 作者:kingrome2017
這篇文章主要介紹了微信小程序 實現(xiàn)listview帶字母滑動的相關(guān)資料,需要的朋友可以參考下
微信小程序 實現(xiàn)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 }); },
感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!
相關(guān)文章
iOS使用UICollectionView實現(xiàn)拖拽移動單元格
這篇文章主要為大家詳細(xì)介紹了iOS開發(fā)UICollectionView拖拽移動單元格,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-04-04iOS開發(fā)之UIMenuController使用示例詳解
這篇文章主要為大家介紹了iOS開發(fā)之UIMenuController使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07iOS開發(fā)中#import、#include和@class的區(qū)別解析
這篇文章主要介紹了iOS開發(fā)中#import、#include和@class的區(qū)別解析,非常不錯,具有參考借鑒價值,感興趣的朋友一起學(xué)習(xí)吧2016-08-08MAC 系統(tǒng)安裝java并配置環(huán)境變量
這篇文章主要介紹了MAC 系統(tǒng)安裝java并配置環(huán)境變量的相關(guān)資料,需要的朋友可以參考下2017-03-03iOS中利用UIBezierPath + CAAnimation實現(xiàn)心跳動畫效果
這篇文章主要給大家介紹了關(guān)于iOS中利用UIBezierPath + CAAnimation實現(xiàn)心跳動畫效果的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的日常開發(fā)具有一定的參考學(xué)習(xí),需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-10-10IOS 遠(yuǎn)程通知兼容(IOS7,IOS8)實例詳解
這篇文章主要介紹了IOS 遠(yuǎn)程通知兼容(IOS7,IOS8)實例詳解的相關(guān)資料,需要的朋友可以參考下2017-03-03iOS App開發(fā)中UITextField組件的常用屬性小結(jié)
這篇文章主要介紹了iOS App開發(fā)中UITextField組件的常用屬性小結(jié),文中還介紹了UITextField隱藏鍵盤及為內(nèi)容增加校驗的兩個使用技巧,需要的朋友可以參考下2016-04-04