mescroll-mixins.js 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. // mescroll-body 和 mescroll-uni 通用
  2. const MescrollMixin = {
  3. data() {
  4. return {
  5. mescroll: null //mescroll实例对象
  6. }
  7. },
  8. // 注册系统自带的下拉刷新 (配置down.native为true时生效, 还需在pages配置enablePullDownRefresh:true;详请参考mescroll-native的案例)
  9. onPullDownRefresh(){
  10. this.mescroll && this.mescroll.onPullDownRefresh();
  11. },
  12. // 注册列表滚动事件,用于判定在顶部可下拉刷新,在指定位置可显示隐藏回到顶部按钮 (此方法为页面生命周期,无法在子组件中触发, 仅在mescroll-body生效)
  13. onPageScroll(e) {
  14. this.mescroll && this.mescroll.onPageScroll(e);
  15. },
  16. // 注册滚动到底部的事件,用于上拉加载 (此方法为页面生命周期,无法在子组件中触发, 仅在mescroll-body生效)
  17. onReachBottom() {
  18. this.mescroll && this.mescroll.onReachBottom();
  19. },
  20. methods: {
  21. // mescroll组件初始化的回调,可获取到mescroll对象
  22. mescrollInit(mescroll) {
  23. this.mescroll = mescroll;
  24. this.mescrollInitByRef(); // 兼容字节跳动小程序
  25. },
  26. // 以ref的方式初始化mescroll对象 (兼容字节跳动小程序)
  27. mescrollInitByRef() {
  28. if(!this.mescroll || !this.mescroll.resetUpScroll){
  29. let mescrollRef = this.$refs.mescrollRef;
  30. if(mescrollRef) this.mescroll = mescrollRef.mescroll
  31. }
  32. },
  33. // 下拉刷新的回调 (mixin默认resetUpScroll)
  34. downCallback() {
  35. if(this.mescroll.optUp.use){
  36. this.mescroll.resetUpScroll()
  37. }else{
  38. setTimeout(()=>{
  39. this.mescroll.endSuccess();
  40. }, 500)
  41. }
  42. },
  43. // 上拉加载的回调
  44. upCallback() {
  45. // mixin默认延时500自动结束加载
  46. setTimeout(()=>{
  47. this.mescroll.endErr();
  48. }, 500)
  49. }
  50. },
  51. mounted() {
  52. this.mescrollInitByRef(); // 兼容字节跳动小程序, 避免未设置@init或@init此时未能取到ref的情况
  53. }
  54. }
  55. export default MescrollMixin;