上拉下拉vant

<template>

  <icm-scroll

    ref="scrollView"

    class="scroll-content"

    :scrolling-x="false"

    :auto-reflow="true"

    @refreshing="onRefresh"

    @refreshActive="onRefreshActive"

    @end-reached="onEndReached"

  >

    <!-- IcmScrollRefresh 需在插槽 refresh 中使用 -->

    <icm-scroll-refresh

      slot="refresh"

      :scroll-top="scrollTop"

      :is-refreshing="isRefreshing"

      :is-refresh-active="isRefreshActive"

    ></icm-scroll-refresh>

    <div class="list-wrapper">

      <slot />

    </div>

    <div v-show="parseInt(total) <= 0" class="no-data-content">

      <img :src="imgSrc" />

      <span>暂无数据</span>

    </div>

    <icm-scroll-more

      slot="more"

      :is-finished="isFinished"

      class="icm-scroll-more"

    >

    </icm-scroll-more>

  </icm-scroll>

</template>

<script>

import nodata from '@/assets/images/nodata.png'

export default {

  props: {

    list: {

      type: Array,

      default: () => [],

    },

    total: {

      type: String,

      default: () => 0,

    },

  },

  data() {

    return {

      isFinished: false,

      scrollTop: 0,

      isRefreshing: false,

      isRefreshActive: false,

      isEmpty: false,

      imgSrc: nodata,

    }

  },

  methods: {

    onRefreshActive() {

      this.isRefreshActive = true

    },

    // 下拉刷新

    onRefresh() {

      this.isRefreshing = true

      this.$emit('refresh', () => {

        this.$refs.scrollView.scrollTo(0, 0)

        this.$refs.scrollView.finishRefresh()

        this.isRefreshActive = false

        this.isRefreshing = false

        // 重置“上拉加载”的状态

        this.isFinished = false

        this.$refs.scrollView.finishLoadMore()

      })

    },

    // 上拉加载

    onEndReached() {

      if (this.isFinished) {

        return

      }

      console.log('this.isFinished', this.isFinished)

      this.$emit('scroll', (res) => {

        const hasMore = this.checkMore(res) // data pageNo pageSize

        if (!hasMore) {

          this.isFinished = true

        }

        this.$refs.scrollView.finishLoadMore()

      })

    },

    checkMore(res) {

      const { list, pageNo, pageSize, total } = res

      if (!list.length || pageNo + (pageNo - 1) * pageSize >= total) {

        return false

      }

      return true

    },

  },

}

</script>

<style lang="scss" scoped>

.scroll-content {

  height: calc(100vh - 70px);

}

.icm-scroll-refresh {

  padding: 5px 0;

}

.icm-scroll-more {

  padding-top: 10px;

  padding-bottom: 120px;

}

.no-data-content {

  height: 400px;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  font-size: 14px;

  font-family: PingFangSC-Regular, PingFang SC;

  font-weight: 400;

  color: #9f9f9f;

  img {

    width: 190px;

    height: 230px;

  }

  span {

    margin-top: 10px;

  }

}

</style>