mescroll-more-item.js 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. /**
  2. * mescroll-more-item的mixins, 仅在多个 mescroll-body 写在子组件时使用 (参考 mescroll-more 案例)
  3. */
  4. const MescrollMoreItemMixin = {
  5. // 支付宝小程序不支持props的mixin,需写在具体的页面中
  6. // #ifndef MP-ALIPAY || MP-DINGTALK
  7. props:{
  8. i: Number, // 每个tab页的专属下标
  9. index: { // 当前tab的下标
  10. type: Number,
  11. default(){
  12. return 0
  13. }
  14. }
  15. },
  16. // #endif
  17. data() {
  18. return {
  19. downOption:{
  20. auto:false // 不自动加载
  21. },
  22. upOption:{
  23. auto:false // 不自动加载
  24. },
  25. isInit: false // 当前tab是否已初始化
  26. }
  27. },
  28. watch:{
  29. // 监听下标的变化
  30. index(val){
  31. if (this.i === val && !this.isInit) this.mescrollTrigger()
  32. }
  33. },
  34. methods: {
  35. // mescroll组件初始化的回调,可获取到mescroll对象 (覆盖mescroll-mixins.js的mescrollInit, 为了标记isInit)
  36. mescrollInit(mescroll) {
  37. this.mescroll = mescroll;
  38. // 自动加载当前tab的数据
  39. if(this.i === this.index){
  40. this.mescrollTrigger()
  41. }
  42. },
  43. // 主动触发加载
  44. mescrollTrigger(){
  45. this.isInit = true; // 标记为true
  46. if (this.mescroll) {
  47. if (this.mescroll.optDown.use) {
  48. this.mescroll.triggerDownScroll();
  49. } else{
  50. this.mescroll.triggerUpScroll();
  51. }
  52. }
  53. }
  54. }
  55. }
  56. export default MescrollMoreItemMixin;