使用vue-infinite-scroll实现无限滚动效果

海信鸥
2023-12-01
 npm  i vue-infinite-scroll --save

main.js使用

import vueiInfinite from 'vue-infinite-scroll'
Vue.use(vueiInfinite)
<div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
     <div class="loading">加载中...</div>
</div>
  1. loadMore是方法,里面是要执行的代码
  2. busy的值是true的时候,就不再加载,如果是false就执行加载
  3. 10表示距离底部为10 的时候就执行loadMore方法
loadMore () {
      this.busy = true
      //把busy置位true,这次请求结束前不再执行
      setTimeout(() => {
        this.page++
        this.getGoodLists(true)
        //调用获取数据接口,并且传入一个true,让axios方法指导是否需要拼接数组。
      }, 500)
    }
getGoodLists (flag) {
      var param = {
        page: this.page,
        pageSize: this.pageSize,
        sort: this.sortFlag ? 1 : -1
      }
      axios.get('/goods', {params: param}).then((response) => {
        let res = response.data
        if (flag) {
          this.goodList = this.goodList.concat(res.result.list)
          //如果是flagtrue,则拼接数组。
          if (res.result.count === 0) {
            this.busy = true
          } else {
            this.busy = false
          }
        } else {
          this.goodList = res.result.list
          this.busy = false
          第一次进来的时候,把busy置位false。执行loadMore的方法
        }
      })
    },
 类似资料: