mescroll-comp.js 1.2 KB

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