mescroll-comp.js 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
  1. /**
  2. * mescroll-body写在子组件时,需通过mescroll的mixins补充子组件缺少的生命周期:
  3. * 当一个页面只有一个mescroll-body写在子组件时, 则使用mescroll-comp.js (参考 mescroll-comp 案例)
  4. * 当一个页面有多个mescroll-body写在子组件时, 则使用mescroll-more.js (参考 mescroll-more 案例)
  5. */
  6. const MescrollCompMixin = {
  7. // 因为子组件无onPageScroll和onReachBottom的页面生命周期,需在页面传递进到子组件 (一级)
  8. onPageScroll(e) {
  9. this.handlePageScroll(e)
  10. },
  11. onReachBottom() {
  12. this.handleReachBottom()
  13. },
  14. // 当down的native: true时, 还需传递此方法进到子组件
  15. onPullDownRefresh(){
  16. this.handlePullDownRefresh()
  17. },
  18. // mescroll-body写在子子子...组件的情况 (多级)
  19. data() {
  20. return {
  21. mescroll: {
  22. onPageScroll: e=>{
  23. this.handlePageScroll(e)
  24. },
  25. onReachBottom: ()=>{
  26. this.handleReachBottom()
  27. },
  28. onPullDownRefresh: ()=>{
  29. this.handlePullDownRefresh()
  30. }
  31. }
  32. }
  33. },
  34. methods:{
  35. handlePageScroll(e){
  36. let item = this.$refs["mescrollItem"];
  37. if(item && item.mescroll) item.mescroll.onPageScroll(e);
  38. },
  39. handleReachBottom(){
  40. let item = this.$refs["mescrollItem"];
  41. if(item && item.mescroll) item.mescroll.onReachBottom();
  42. },
  43. handlePullDownRefresh(){
  44. let item = this.$refs["mescrollItem"];
  45. if(item && item.mescroll) item.mescroll.onPullDownRefresh();
  46. }
  47. }
  48. }
  49. export default MescrollCompMixin;