【vue-scroller】vue移动端插件，监听下拉触底，上拉刷新

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

效果如图，报错是我的判断是否已全部请求完没写好

传送门：github地址

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、安装

npm i vue-scroller -S

二、使用步骤

1.在mian.js引入

代码如下（示例）：

import Vue from 'vue'
import VueScroller from 'vue-scroller'
Vue.use(VueScroller)

2.页面代码案例

代码如下（示例）：

<scroller 
  :on-refresh="refresh"
  :on-infinite="infinite">
  <!-- content goes here -->
</scroller>

3.改写之后的代码

data变量

loading: false, // 是否正在加载中
finished: false, // 是否已经加载完全部数据

页面

<scroller style="background-color:#F9F9FC ;" 
:on-refresh="onRefresh" :on-infinite="onScroll" ref="scroller"
 noDataText="暂无更多数据">
  循环体内容
</scroller>

下拉刷新方法和触底加载

// 下拉刷新
onRefresh() {
    
    
    this.queryParams.pageNum = 1
    setTimeout(() => {
    
    
        Toast('刷新成功');
        this.$refs.scroller.finishPullToRefresh(); // 关闭下拉转圈
    }, 1000);
},
// 触底加载
onScroll() {
    
    
    setTimeout(() => {
    
    
        console.log("触底加载了!")
        this.getIncomeList()
        this.$nextTick(() => {
    
    
            this.$refs.scroller.finishInfinite(true); // 关闭底部加载转圈
        })
    }, 1000)
},

数据请求

// 查询收文列表
getIncomeList() {
    
    
    if (this.loading || this.finished) return
    this.loading = true
    taskList(this.queryParams).then(res => {
    
    
        this.total = res.total
        this.loading = false
        const data = res.rows
        // 如果请求到的长度<=10
        if (data.length === 0) {
    
    
            this.finished = true
            return
        }
        this.incomeList = this.incomeList.concat(data)
        this.queryParams.pageNum++
        if (data.length < this.queryParams.pageSize) {
    
    
            this.finished = true
        }
    })
}

三、变量和方法分析

vue-scroller

名称	方法-变量
关闭底部加载转圈	this.$refs.scroller.finishInfinite(true);
关闭下拉转圈	this.$refs.scroller.finishPullToRefresh();

总结

作者的github页面参数

代码预览