mescroll-mixins.js 2.0 KB

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