小程序模板网

微信小程序带字母滑动的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回调函数

回调函数原理:

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

点击此处转载参考文献



易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/23673.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询