NN2023021801/addons/dbapp/components/scroll/scroll.vue

<script>
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js'

export default {
  name: 'scroll',
  mixins: [MescrollMixin],
  props: {
    downOpt: {
      // 下拉刷新配置
      default: () => ({})
    },
    upOpt: {
      // 上拉加载配置
      default: () => ({})
    },
    isPart: Boolean,
    isSticky: Boolean,
    height: {
      type: [String, Number],
      default: ''
    },
    top: {
      type: [String, Number],
      default: 0
    },
    bottom: {
      type: [String, Number],
      default: 0
    }
  },
  inject: {
    downCb: {
      default: 'no Function'
    },
    getList: {
      default: () => 0
    }
  },
  methods: {
    // 下拉刷新的回调
    downCbHandle() {
      if (typeof this.downCb !== 'function') {
        // mescroll mixin 默认方法
        this.downCallback()
      } else {
        // 从父组件传递的方法
        this.downCb()
      }
    },
    async upCallback(page) {
      try {
        const curPageLen = await this.getList({ page: page.num, limit: page.size })
        this.mescroll.endSuccess(curPageLen)
        // this.mescroll.endSuccess(curPageLen, hasNext)
      } catch (e) {
        this.mescroll.endErr()
      }
    },
    reload(isShowLoading = true) {
      this.mescroll.resetUpScroll(isShowLoading)
    }
  }
}
</script>

<template>
  <!--  <view :class="{ partAutoHeight: isPart }">-->
  <view>
    <slot name="top"></slot>
    <!-- 页面级滚动 -->
    <mescroll-body
      v-if="!isPart"
      ref="mescrollRef"
      @init="mescrollInit"
      @down="downCbHandle"
      @up="upCallback"
      :down="downOpt"
      :up="upOpt"
      :sticky="isSticky"
      :top="top"
      :bottom="bottom"
      :bottombar="false"
    >
      <slot></slot>
    </mescroll-body>
    <!-- 局部滚动 -->
    <mescroll-uni
      v-else
      ref="mescrollRef"
      @init="mescrollInit"
      @down="downCbHandle"
      @up="upCallback"
      :down="downOpt"
      :up="upOpt"
      :sticky="isSticky"
      :top="top"
      :bottom="bottom"
      :bottombar="false"
      :fixed="false"
      :height="height"
    >
      <!-- // 此处除了不能写原生组件,其他的与 mescroll-body 的一致 -->
      <slot></slot>
    </mescroll-uni>
    <slot name="bottom"></slot>
  </view>
</template>

<style lang="scss" scoped>
.partAutoHeight {
  height: 100%;
}
</style>