DigitalScholl/Learun.Framework.Ultimate V7/LearunApp-2.2.0/components/learun-app/scroll-list.vue

<template>
  <scroll-view
    @scrolltolower="$emit('toBottom')"
    @refresherrefresh="onRefresh"
    @refresherrestore="onRefreshRestore"
    @scroll="scroll"
    :scroll-top="scrollTop"
    :refresher-triggered="pullDown"
    :refresher-enabled="enablePullDown"
    :refresher-background="refresherBackground"
    :refresher-threshold="80"
    class="lr-scroll-list"
    style="height: 100%; display: block;"
    scroll-anchoring
    scroll-y
  >
    <slot></slot>
  </scroll-view>
</template>

<script>
export default {
  name: 'l-scroll-list',

  props: {
    refresherBackground: { default: '#f3f3f3' }
  },

  data() {
    return {
      scrollTop: 0,
      pullDown: true,
      enablePullDown: true
    }
  },

  methods: {
    // 【外部调用的方法】，滚动到某个高度
    scrollTo(num) {
      this.$nextTick(() => {
        this.scrollTop = num
      })
    },

    // 【外部调用的方法】，结束下拉刷新
    stopPullDown() {
      this.pullDown = false
      this.isPullDown = false
    },

    // 下拉刷新触发
    onRefresh() {
      if (this.isPullDown) {
        return
      }

      this.isPullDown = true
      this.pullDown = true
      this.$emit('pullDown')
    },

    // 下拉恢复可用
    onRefreshRestore() {
      this.pullDown = false
      this.isPullDown = false
    },

    // 列表滚动时
    scroll(e) {
      // 修复 App 和 H5 端的滚动过快
      // #ifdef APP-VUE || H5
      this.enablePullDown = e.detail.scrollTop <= 0
      // #endif

      this.$emit('scroll', e)
    }
  }
}
</script>

<style lang="less">
:host {
  display: block;
  height: 100vh;
}
</style>