欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue 上拉加载

程序员文章站 2022-06-20 19:02:52
...

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)
        })
      }
    }
  }