微信小程序 實(shí)現(xiàn)listview帶字母滑動(dòng)
微信小程序 實(shí)現(xiàn)listview帶字母滑動(dòng)
wxml
<!--字母滑動(dòng)-->
<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
});
},
感謝閱讀,希望能幫助到大家,謝謝大家對(duì)本站的支持!
- 微信小程序 實(shí)現(xiàn)列表項(xiàng)滑動(dòng)顯示刪除按鈕的功能
- 微信小程序 向左滑動(dòng)刪除功能的實(shí)現(xiàn)
- 微信小程序圖片橫向左右滑動(dòng)案例
- 微信小程序-橫向滑動(dòng)scroll-view隱藏滾動(dòng)條
- 性能分析:指如何快速定位SQL問(wèn)題
- 微信小程序左右滑動(dòng)切換頁(yè)面詳解及實(shí)例代碼
- 微信小程序模板之分頁(yè)滑動(dòng)欄
- 微信小程序側(cè)邊欄滑動(dòng)特效(左右滑動(dòng))
- 微信小程序 兩種滑動(dòng)方式(橫向滑動(dòng),豎向滑動(dòng))詳細(xì)及實(shí)例代碼
- 微信小程序?qū)崿F(xiàn)滑動(dòng)刪除效果
相關(guān)文章
iOS中定位當(dāng)前位置坐標(biāo)及轉(zhuǎn)換為火星坐標(biāo)的方法
這篇文章主要介紹了iOS中獲取當(dāng)前位置坐標(biāo)及轉(zhuǎn)換為火星坐標(biāo)的方法,這里的火星坐標(biāo)指的是我國(guó)專門(mén)研制的一種加密的坐標(biāo)系統(tǒng)...需要的朋友可以參考下2016-02-02
iOS實(shí)現(xiàn)“搖一搖”與“掃一掃”功能示例代碼
本篇文章主要介紹了iOS實(shí)現(xiàn)“搖一搖”與“掃一掃”功能示例代碼,具有一定的參考價(jià)值,有興趣的可以了解一下。2017-01-01
iOS中關(guān)于Swift UICollectionView橫向分頁(yè)的問(wèn)題
這篇文章通過(guò)圖文并茂的形式給大家介紹UICollectionView橫向分頁(yè)的問(wèn)題,非常不錯(cuò),具有參考借鑒價(jià)值,需要的的朋友參考下吧2017-05-05
實(shí)例講解iOS音樂(lè)播放器DOUAudioStreamer用法
本篇文章給大家通過(guò)實(shí)例講解了iOS音樂(lè)播放器DOUAudioStreamer用法以及分享了實(shí)例代碼,一起學(xué)習(xí)參考下吧。2017-12-12
iOS實(shí)現(xiàn)列表與網(wǎng)格兩種視圖的相互切換
相信大家應(yīng)該也都發(fā)現(xiàn)了,在現(xiàn)在很多的電商app中,都會(huì)有列表視圖和網(wǎng)格兩種視圖的相互切換。例如京東和淘寶。這樣更利于提高用戶的體驗(yàn)度,所以這篇文章小編就是大家分享下利用iOS實(shí)現(xiàn)列表與網(wǎng)格兩種視圖相互切換的方法,文中介紹的很詳細(xì),感興趣的下面來(lái)一起看看吧。2016-10-10
IOS給xcode工程關(guān)聯(lián)pod的實(shí)例詳解
這篇文章主要介紹了IOS給xcode工程關(guān)聯(lián)pod的實(shí)例詳解的相關(guān)資料,希望大家通過(guò)本文能實(shí)現(xiàn)這樣的需求,需要的朋友可以參考下2017-09-09
Flutter Widgets粘合劑CustomScrollView NestedScrollVie
這篇文章主要為大家介紹了Flutter Widgets粘合劑CustomScrollView NestedScrollView滾動(dòng)控件示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11
ios基于MJRefresh實(shí)現(xiàn)上拉刷新和下拉加載動(dòng)畫(huà)效果
本篇文章主要介紹了ios基于MJRefresh實(shí)現(xiàn)上拉刷新和下拉加載動(dòng)畫(huà)效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-08-08

