vue 上拉加载

最新推荐文章于 2022-05-07 10:12:54 发布

曾经沧海海

最新推荐文章于 2022-05-07 10:12:54 发布

阅读量308

点赞数

分类专栏： vue 文章标签： vue 上拉加载 Scroll on-reach-bottom handleReachBottom

本文链接：https://blog.csdn.net/m0_37684037/article/details/100083065

版权

vue 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

html：

<template>
  <div>
    <Scroll :on-reach-bottom="handleReachBottom" :height="600">
      <div class="record-info" style="min-width: 1000px;">
        <Divider dashed />
        <div style="margin-bottom: 20px;">任务完成记录：</div>
        <Table class="record-table" :columns="columnsName" :data="recordList"></Table>
      </div>
    </div>
    </Scroll>
  </div>
</template>

js:

import http from '@/assets/http.js'
export default {
  name: 'SearchTask',
  data () {
    return {
      columnsName3: [
        {
          title: '序号',
          key: 'id',
          align: 'center',
          width: 70
        },
        {
          title: '课程id',
          key: 'courseId',
          align: 'center',
          width: 120
        }
      ],
      recordList: [],
      page: 1,
      more: 0,
    }
  },
  methods: {
    handleReachBottom () {
      if (this.more) {
        return new Promise(resolve => {
          this.page++
          setTimeout(() => {
            this.getFishRecord(this.page)
            resolve()
          }, 300)
        })
      }
    }
  }