vue 使用mescroll.js框架实现下拉加载和上拉刷新功能

以下是代码是在项目中抽取出来的，都是实现下拉刷新上拉加载的要点。

注：以下不是用vue-cli写的，用vue-cli的请绕过，抱歉~

1、mescroll 的页面的初始化

initMescroll(){
            var _this = this;
            this.mescroll = new MeScroll("mescroll",{
                down:{
                    callback: _this.downCallback  //下拉刷新的回调函数
                },
                up:{
                    callback: _this.upCallback,   //上拉加载的回调函数
                    auto:false, //是否在初始化完毕之后自动执行一次上拉加载的回调
                    noMoreSize:5,//无数据时,可设置列表的总数量要大于5条才显示无更多数据
                    htmlNodata:'<p class="upwarp-nodata">-- 没有更多数据了 --</p>',
                    toTop:{  //页面滚动到一定距离时,显示回到顶部的图标
                        warpId : null,
                        src : "img/totop.svg",
                        html: null,
                        offset : 1000,
                        warpClass : "mescroll-totop",
                        showClass : "mescroll-fade-in",
                        hideClass : "mescroll-fade-out",
                        duration : 300,
                        supportTap : false,
                        btnClick : null
                    },
                    empty:{    // 数据为空时，显示无数据的图片和提示
                        warpId : "scroll-box",
                        icon : "img/nodata.svg",
                        tip : "暂无相关数据~"
                    }
                }
            })

        }

2、下拉刷新回调

downCallback(){
     this.curPageNum =0; //默认为0,
     this.pageSize = 10;
     this.dataList = [];
     this.mescroll.resetUpScroll(true);  //重置列表为第一页curPageNum会变成1 ,实现下拉刷新
 }

3、上拉加载回调

upCallback(){
     this.curPageNum += 1;
     this.pageSize = 10;
     this.getDataList(); //上拉加载数据请求函数
 }

4、数据请求的函数

getDataList(){
    var _this = this;
    var url = "api接口地址";
    axios.get(url)
    .then(function(res){
        _this.dataList = _this.dataList.concat(res.data.dataList);
            var totalPage = res.data.totalPage;
            var totalSize = res.data.totalSize;
            var hasNext = res.data.hasNext;
           _this.mescroll.endSuccess(res.data.pageSize,hasNext);
        })
    .catch(function(err){
        _this.mescroll.endErr();
    })
}

5、关键字搜索，页面刷新 （同切换菜单页面刷新效果）

searchCommit(){
     this.curPageNum = 0;
     this.dataList = [];
     this.mescroll.resetUpScroll()
 }

mescroll.js框架官网地址：http://www.mescroll.com/index.html

到此这篇关于vue 使用mescroll.js框架 实现下拉加载和上拉刷新功能的文章就介绍到这了,更多相关vue下拉加载和上拉刷新内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue插件mescroll.js实现移动端上拉加载和下拉刷新

    做一个简单的移动端展示项目,后台分页后前端加载,实现上拉加载下一页,找了下,还是用这个mescroll.js插件好一点 1.npm安装 npm install --save mescroll.js //不要使用cnpm安装 导入(在哪个页面使用,则在哪个页面导入(这里的话,我使用全局导入会出现问题,若有错,还请大家指出,暂时想到的就是局部引入)): import MescrollVue from 'mescroll.js/mescroll.vue' 注册组件: components: { Mes

  • 基于Vue框架vux组件库实现上拉刷新功能

    最近公司在研发app,选择了基于Vue框架的vux组件库,现总结在实现上拉刷新功能遇到的坑: 1.问题:只刷新一次,解决方法:需要自己手动重置状态 this.scrollerStatus.pullupStatus = 'default', 2.问题:不能滚动,解决方法:因为启用keep-alive缓存,需要设置 activated () { this.$refs.scroller.reset() } 如果还没效果,请在获取后台数据后,执行如下代码 this.$nxtTick(() => { th

  • Vue实现下拉加载更多

    熟悉Element-UI的开发者可能都会有这样的经历,它的无限滚动 InfiniteScroll 并不好用,下面介绍两种下拉加载的实现方法: 1. 使用el-table-infinite-scroll 插件 (1). 安装插件 npm install --save el-table-infinite-scroll (2). 全局引入并注册 // main.js import elTableInfiniteScroll from 'el-table-infinite-scroll'; Vue.us

  • Vue记住滚动条和实现下拉加载的完美方法

    滚动条 常见于移动端 App 在滚动点击进入的时候 问题描述 当我们在开发 web app 的时候,经常会遇到一个问题,就是当从一个可滚动的列表页进入到下一个详情页面,然后返回列表页面的时候,很难去还原滚动条的状态,无法记住进来时候的位置. 以前我尝试过很多方法: 有 vue-router 自带的 scrollBehavior,需要记住 scrollTop,然后还原,但是管理这个 scrollTop 显得很麻烦,有的时候还不容易取值还有使用纯 CSS 的方式,在列表页面放置一个 router-v

  • vue 使用mescroll.js框架实现下拉加载和上拉刷新功能

    以下是代码是在项目中抽取出来的,都是实现下拉刷新上拉加载的要点. 注:以下不是用vue-cli写的,用vue-cli的请绕过,抱歉~ 1.mescroll 的页面的初始化 initMescroll(){ var _this = this; this.mescroll = new MeScroll("mescroll",{ down:{ callback: _this.downCallback //下拉刷新的回调函数 }, up:{ callback: _this.upCallback,

  • 微信小程序下拉加载和上拉刷新两种实现方法详解

    方法一:onPullDownRefresh和onReachBottom方法实现小程序下拉加载和上拉刷新 首先要在json文件里设置window属性 设置js里onPullDownRefresh和onReachBottom方法 下拉加载说明: 当处理完数据刷新后,wx.stopPullDownRefresh可以停止当前页面的下拉刷新. onPullDownRefresh(){ console.log('--------下拉刷新-------') wx.showNavigationBarLoadin

  • vue实现的上拉加载更多数据/分页功能示例

    本文实例讲述了vue实现的上拉加载更多数据/分页功能.分享给大家供大家参考,具体如下: 加载状态 <div v-if='has_log == 0'> <load-more tip="上拉加载" :show-loading="false" background-color="#fbf9fe"></load-more> </div> <div v-if='has_log == 1'> <

  • 微信小程序 详解下拉加载与上拉刷新实现方法

    微信小程序 详解下拉加载与上拉刷新实现方法

    微信小程序下拉刷新上拉加载的两种实现方法 实现效果图: 方法一:onPullDownRefresh和onReachBottom方法实现小程序下拉加载和上拉刷新 首先要在json文件里设置window属性             属性   类型                           描述 enablePullDownRefresh Boolean 是否开启下拉刷新,详见页面相关事件处理函数. 设置js里onPullDownRefresh和onReachBottom方法 属性    类

  • 微信小程序常用功能实例汇总包括上拉刷新,下拉加载,列表数据绑定,轮播,参数传递

    微信小程序 getApp() 方法 小程序提供了全局的 getApp() 方法,可获取当前小程序实例,一般用于在子页面中获取顶层应用. // app.js App({ globalData: 1 }); // page.js var app = getApp(); console.log(app.globalData); // 获取 globalData 一 整体结构 图片目录(images).页面目录(pages).公共脚本(utils).全局配置(app.json.project.confi

  • Android使用recyclerview打造真正的下拉刷新上拉加载效果

    Android使用recyclerview打造真正的下拉刷新上拉加载效果

    前言 前段时间需要用到recyclerview,就想找个封装好的下拉刷新,上拉加载的库,结果愣是没找到,便自己写了一个. 注意:我说的是"上拉加载",不是滑到底部自动加载. 虽然现在自动加载是主流和趋势,但也不排除有时候就需要用到上拉加载啊,毕竟林子大了,什么样的产品经理都有对吧. 代码写好后,准备发布到bintray的时候,向同事征求这个项目的名字,同事说:"就叫DZTRecyclerview!" 不解,同事解释:"叼炸天Recyclerview!&qu

  • Android RecyclerView下拉刷新和上拉加载更多

    Android RecyclerView下拉刷新和上拉加载更多

    今天终于有点时间,来写了一下: 为RecyclerView实现下拉刷新和上拉加载更多.今天会在前面的两篇文章的基础上: RecyclerView系列之(1):为RecyclerView添加Header和Footer RecyclerView系列之(2):为RecyclerView添加分隔线 继续讲述RecyclerView中一些常用组件的实现下拉刷新和上拉加载更多的功能. 在现在的Android手机应用中,几乎每一个APP都有下拉刷新和上拉加载更多的功能,它们的重要性不言而喻. 先不多说,先看效

  • Flutter ListView 上拉加载更多下拉刷新功能实现方法

    先上图 下拉刷新 跟原生开发一样,下拉刷新在flutter里提供的有组件实现 RefreshIndicator 一直不明白为啥组件中都提供下拉刷新,但就是没有上拉加载!! 我这请求接口数据用的是 http 库,是个第三方的是需要安装的 https://pub.dev/packages/http 用法如下 class MyHomePage extends StatefulWidget { MyHomePage({Key key}) : super(key: key); @override MyHo

  • Android  RecyclerView下拉刷新和上拉加载更多

    Android  RecyclerView下拉刷新和上拉加载更多

    今天终于有点时间,来写了一下: 为RecyclerView实现下拉刷新和上拉加载更多.今天会在前面的两篇文章的基础上: RecyclerView系列之(1):为RecyclerView添加Header和Footer RecyclerView系列之(2):为RecyclerView添加分隔线 继续讲述RecyclerView中一些常用组件的实现下拉刷新和上拉加载更多的功能. 在现在的Android手机应用中,几乎每一个APP都有下拉刷新和上拉加载更多的功能,它们的重要性不言而喻. 先不多说,先看效

  • uniapp实现上拉加载更多功能的全过程

    目录 一.添加全部 1.在主页面中添加一列 2.改云函数 3.插件市场导入 加载中组件 二.实现上拉加载 1.云函数中可以接收参数 2.获取下拉事件 3.写触发这个下拉干嘛 总结 一.添加全部 1.在主页面中添加一列 data.unshift({ name:'全部' }) //添加一列 '全部' 2.改云函数 (累了 直接上代码)这里match匹配空对象相当于全部哈 'use strict'; const db=uniCloud.database()//1.创建引用 exports.main =

随机推荐