微信小程序带字母滑动的listview， js中回调函数

分享者：kingrome2017，来自原文地址

一：带字母滑动的listview

wxml

1. <!--字母滑动-->
2. <view class="letter-position" wx:if="{{filterType == 'name'}}" hidden="{{letterShow?'true':''}}" style="z-index:{{Zindex}}" catchtouchstart="handlerAlphaTap" catchtouchmove="handlerMove" catchtouchend="handlerEnd">
3. <image class="no-stars star-icon" data-loc="star" src="../img/no-stars.png"></image>
4. <text class="letter" wx:for="{{groups}}" wx:for-item="group" data-loc="{{group.id}}" wx:key="L_{{group.id}}">
5. {{group.id}}
6. </text>
7. <text class="letter no-letter">
8. #
9. </text>
10. </view>

1. <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

1. handlerAlphaTap(e) {
2. var ap = e.target.dataset.loc; //字母
3. this.setData({
4. locationTo: ap
5. });
6.  
7. var list = this.data.groups;
8. this.offsetTop = (this.data.clientHeihgt - list.length * 16) / 2;
9.  
10. },
11.  
12. handlerMove(e) {
13. var _this = this;
14. var list = this.data.groups;
15. var moveY = e.touches[0].clientY;
16. var rY = moveY - this.offsetTop;
17. if (rY >= 0) {
18. var index = Math.ceil((rY - 16) / 16);
19. if (0 <= index && index < list.length) {
20. _this.setData({
21. locationTo: list[index].id,
22. nonwApID: list[index].id,
23. fly: false,
24. //nonwAp: list[index]
25. });
26. // _this.setData({
27. // nonwApID:_this.data.nonwAp.id
28. // });
29. }
30.  
31. }
32. },
33. handlerEnd(e) {
34. // try{
35. this.setData({
36. nonwApID: '',
37. fly: true,
38. // locationTo:this.data.nonwAp.id
39. });
40. // }catch(e){
41.  
42. // }
43. var _this = this;
44. this.setData({
45. scoTTTTp: e.currentTarget.dataset.scrollTop
46. });
47.  
48. },

二：js回调函数

回调函数原理：

我现在出发，到了通知你”  这是一个异步的流程，“我出发”这个过程中（函数执行），“你”可以去做任何事，“到了”（函数执行完毕）“通知你”（回调）进行之后的流程

点击此处转载参考文献