ScrollEventPlugin.js 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  1. //针对阿里小程序Scroll控件定制的补充事件的插件类
  2. //阿里小程序要求Scroll控件内必须有一个class为scroll-list的元素,这里我们的插件对scroll-list也有一定要求,scroll-list相对于父级元素不要有高度的padding或margin的情况,否则
  3. //会导致滚动计算不准确导致无法命中事件的情况
  4. class ScrollEventPlugin {
  5. constructor() {
  6. this.eventLock = false;
  7. this.widget = null;
  8. this.dom = null;
  9. this.onToBottomCallback = null;
  10. this.onToTopCallback = null;
  11. }
  12. bind(widget){
  13. this.widget = widget;
  14. this.dom = widget.con;
  15. this.widget.on('scrollend', ()=>{
  16. if(this.eventLock) { return; }
  17. let wTop = this.dom.getElementsByClassName('scroll-list')[0].style.top;
  18. wTop = parseFloat(wTop.replace('px' , ''));
  19. let scrollHeight = this.dom.clientHeight;
  20. let listHeight = this.dom.getElementsByClassName('scroll-list')[0].clientHeight;
  21. let maxOffset = listHeight - scrollHeight;
  22. if(wTop == 0 && this.onToTopCallback){
  23. this.onToTopCallback();
  24. this.eventLock = true;
  25. return;
  26. }
  27. if(wTop == maxOffset * -1 && this.onToBottomCallback){
  28. this.onToBottomCallback();
  29. this.eventLock = true;
  30. }
  31. });
  32. }
  33. onScrollToBottom(callback){
  34. this.onToBottomCallback = callback;
  35. }
  36. onScrollToTop(callback){
  37. this.onToTopCallback = callback;
  38. }
  39. releaseEventLock(){
  40. this.eventLock = false;
  41. }
  42. }
  43. module.exports = ScrollEventPlugin;