mescroll-mixins.js 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  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对象 (兼容字节跳动小程序)
  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. // 下拉刷新的回调 (mixin默认resetUpScroll)
  40. downCallback() {
  41. if(this.mescroll.optUp.use){
  42. this.mescroll.resetUpScroll()
  43. }else{
  44. setTimeout(()=>{
  45. this.mescroll.endSuccess();
  46. }, 500)
  47. }
  48. },
  49. // 上拉加载的回调
  50. upCallback() {
  51. // mixin默认延时500自动结束加载
  52. setTimeout(()=>{
  53. this.mescroll.endErr();
  54. }, 500)
  55. }
  56. },
  57. mounted() {
  58. this.mescrollInitByRef(); // 兼容字节跳动小程序, 避免未设置@init或@init此时未能取到ref的情况
  59. }
  60. }
  61. export default MescrollMixin;