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

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

文章目录

  • 前言
  • 一、安装
  • 二、使用步骤
    • 1.在mian.js引入
    • 2.页面代码案例
    • 3.改写之后的代码
  • 三、变量和方法分析
  • 总结


前言

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

传送门: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">
  
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();

【vue-scroller】vue移动端插件,监听下拉触底,上拉刷新_第1张图片

总结

作者的github页面参数
【vue-scroller】vue移动端插件,监听下拉触底,上拉刷新_第2张图片

代码预览
【vue-scroller】vue移动端插件,监听下拉触底,上拉刷新_第3张图片

你可能感兴趣的:(vue插件实战案例,Vue,vue.js,javascript,前端)