微信小程序 實現(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中定位當前位置坐標及轉(zhuǎn)換為火星坐標的方法
這篇文章主要介紹了iOS中獲取當前位置坐標及轉(zhuǎn)換為火星坐標的方法,這里的火星坐標指的是我國專門研制的一種加密的坐標系統(tǒng)...需要的朋友可以參考下2016-02-02
iOS中關(guān)于Swift UICollectionView橫向分頁的問題
這篇文章通過圖文并茂的形式給大家介紹UICollectionView橫向分頁的問題,非常不錯,具有參考借鑒價值,需要的的朋友參考下吧2017-05-05
實例講解iOS音樂播放器DOUAudioStreamer用法
本篇文章給大家通過實例講解了iOS音樂播放器DOUAudioStreamer用法以及分享了實例代碼,一起學習參考下吧。2017-12-12
iOS實現(xiàn)列表與網(wǎng)格兩種視圖的相互切換
相信大家應該也都發(fā)現(xiàn)了,在現(xiàn)在很多的電商app中,都會有列表視圖和網(wǎng)格兩種視圖的相互切換。例如京東和淘寶。這樣更利于提高用戶的體驗度,所以這篇文章小編就是大家分享下利用iOS實現(xiàn)列表與網(wǎng)格兩種視圖相互切換的方法,文中介紹的很詳細,感興趣的下面來一起看看吧。2016-10-10
IOS給xcode工程關(guān)聯(lián)pod的實例詳解
這篇文章主要介紹了IOS給xcode工程關(guān)聯(lián)pod的實例詳解的相關(guān)資料,希望大家通過本文能實現(xiàn)這樣的需求,需要的朋友可以參考下2017-09-09
Flutter Widgets粘合劑CustomScrollView NestedScrollVie
這篇文章主要為大家介紹了Flutter Widgets粘合劑CustomScrollView NestedScrollView滾動控件示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-11-11
ios基于MJRefresh實現(xiàn)上拉刷新和下拉加載動畫效果
本篇文章主要介紹了ios基于MJRefresh實現(xiàn)上拉刷新和下拉加載動畫效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-08-08

