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

最新推荐文章于 2025-06-20 10:29:46 发布

原创最新推荐文章于 2025-06-20 10:29:46 发布 · 1.8k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

Vue 同时被 2 个专栏收录

54 篇文章

订阅专栏

vue插件实战案例

8 篇文章

订阅专栏

本文介绍了如何使用vue-scroller组件进行下拉刷新和触底加载功能的实现，包括在main.js中引入组件、配置页面代码以及处理数据请求的方法。同时，文章提供了变量和方法的分析，帮助理解组件的工作原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

前言

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

传送门：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
        }
    })
}