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


Posted in Javascript onMarch 07, 2019

做一个简单的移动端展示项目,后台分页后前端加载,实现上拉加载下一页,找了下,还是用这个mescroll.js插件好一点

1.npm安装

npm install --save mescroll.js //不要使用cnpm安装

导入(在哪个页面使用,则在哪个页面导入(这里的话,我使用全局导入会出现问题,若有错,还请大家指出,暂时想到的就是局部引入)):

import MescrollVue from ‘mescroll.js/mescroll.vue'

注册组件:

components: {
  MescrollVue // 注册mescroll组件
},

template使用

<mescroll-vue ref="mescroll" :down="mescrollDown" :up="mescrollUp" @init="mescrollInit" class="scrollView">
</mescroll-vue>

2.data里进行相关配置

data () {
 return {
  mescroll: null, // mescroll实例对象
  mescrollDown:{}, //下拉刷新的配置. (如果下拉刷新和上拉加载处理的逻辑是一样的,则mescrollDown可不用写了)
  mescrollUp: { // 上拉加载的配置.
    callback: this.upCallback, // 上拉回调,此处简写; 相当于 callback: function(page, mescroll) { }
    //以下是一些常用的配置,当然不写也可以的.
    page: {
      num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
      size: 10 //每页数据条数,默认10
    },
    noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于5才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
    toTop: {
      //回到顶部按钮
      src: "./static/mescroll/mescroll-totop.png", //图片路径,默认null,支持网络图
      offset: 1000 //列表滚动1000px才显示回到顶部按钮
    },
    htmlContent: '<p class="downwarp-progress"></p><p class="downwarp-tip">下拉刷新 </p>', //布局内容
    empty: {
      //列表第一页无任何数据时,显示的空提示布局; 需配置warpId才显示
      warpId: "xxid", //父布局的id (1.3.5版本支持传入dom元素)
      icon: "./static/mescroll/mescroll-empty.png", //图标,默认null,支持网络图
      tip: "暂无相关数据~" //提示
    }
  },
  articleList: [] // 列表数据
 }
},
beforeRouteEnter (to, from, next) { // 如果没有配置回到顶部按钮或isBounce,则beforeRouteEnter不用写
  next(vm => {
   vm.$refs.mescroll.beforeRouteEnter() // 进入路由时,滚动到原来的列表位置,恢复回到顶部按钮和isBounce的配置
  })
},
beforeRouteLeave (to, from, next) { // 如果没有配置回到顶部按钮或isBounce,则beforeRouteLeave不用写
  this.$refs.mescroll.beforeRouteLeave() // 退出路由时,记录列表滚动的位置,隐藏回到顶部按钮和isBounce的配置
  next()
},
methods: {
 mescrollInit(mescroll) {
   this.mescroll = mescroll;
 },
 upCallback(page, mescroll) {
  this.$Request({
    url: "",
    method: "get",
    data: {
     page: page.num
    },
    success: res => {
     if (res.status == 1) {
      let data = page.num == 1 ? [] : this.articleList;
      data.push(...res.result.data);
      this.articleList = data;
      // 数据渲染成功后,隐藏下拉刷新的状态
      this.$nextTick(() => {
       mescroll.endSuccess(res.result.data.length);
      });
     }
    }
  });
 }
 }
}

3.style样式

.mescroll {
  position: fixed;
  padding-bottom: 1rem;
  top: 2px;
  bottom: 0;
  height: auto;
}

具体的配置可以参考:mescroll配置

4.加载完成后

可以在data中的mescrollUp项中进行底部没有更多数据时的提示信息,'END'及'加载中...'这些内容可以自己设置

htmlLoading: '<p class="upwarp-progress mescroll-rotate"></p><p class="upwarp-tip">加载中..</p>', //上拉加载中的布局
htmlNodata: '<p class="upwarp-nodata">-- END --</p>', //无数据的布局

可以查看源码进行设置: mescroll源码(GitHub)

5.scroll属性在ios手机上回出现卡顿问题

在进行滚动的这个容器样式中添加这个属性:

-webkit-overflow-scrolling:touch;

但是的话,填加了这个兼容会导致定位为position:fixed的失去效果,看了一些资料,使用position:absolute可以解决,这个我没有具体的再去实验下,若有好的方法,还请大家能够在评论里告知下,感激不尽

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
人人网javascript面试题 可以提前实现下
Jan 05 Javascript
ff chrome和ie下全局动态定位的异同及全局高度的取法
Jun 30 Javascript
JS定义网页表单提交(submit)的方法
Mar 20 Javascript
JavaScript函数使用的基本教程
Jun 04 Javascript
javascript同步服务器时间和同步倒计时小技巧
Sep 24 Javascript
常常会用到的截取字符串substr()、substring()、slice()方法详解
Dec 16 Javascript
对称加密与非对称加密优缺点详解
Feb 06 Javascript
详解vue嵌套路由-query传递参数
May 23 Javascript
webpack构建vue项目的详细教程(配置篇)
Jul 17 Javascript
微信小程序调用微信支付接口的实现方法
Apr 29 Javascript
layui的面包屑或者表单不显示的解决方法
Sep 05 Javascript
Angular+ionic实现折叠展开效果的示例代码
Jul 29 Javascript
从0到1构建vueSSR项目之node以及vue-cli3的配置
Mar 07 #Javascript
从0到1构建vueSSR项目之路由的构建
Mar 07 #Javascript
bootstrap-table实现表头固定以及列固定的方法示例
Mar 07 #Javascript
js如何获取图片url的Blob值并预览示例代码
Mar 07 #Javascript
mpvue全局引入sass文件的方法步骤
Mar 06 #Javascript
angular6根据environments配置文件更改开发所需要的环境的方法
Mar 06 #Javascript
vue项目前端埋点的实现
Mar 06 #Javascript
You might like
PHP 中执行系统外部命令
2006/10/09 PHP
PHP+SQL 注入攻击的技术实现以及预防办法
2010/12/29 PHP
php序列化函数serialize() 和 unserialize() 与原生函数对比
2015/05/08 PHP
OAuth认证协议中的HMACSHA1加密算法(实例)
2017/10/25 PHP
php实现等比例压缩图片
2018/07/26 PHP
实例讲解通过​PHP创建数据库
2019/01/20 PHP
MacOS下PHP7.1升级到PHP7.4.15的方法
2021/02/22 PHP
javascript在一段文字中的光标处插入其他文字
2007/08/26 Javascript
jquery聚焦文本框与扩展文本框聚焦方法
2012/10/12 Javascript
js实现上传图片之上传前预览图片
2013/03/25 Javascript
浅析JavaScript中的同名标识符优先级
2013/12/06 Javascript
jQuery中:hidden选择器用法实例
2014/12/30 Javascript
jQuery中设置form表单中action值的实现方法
2016/05/25 Javascript
利用css+原生js制作简单的钟表
2020/04/07 Javascript
Vue.JS入门教程之列表渲染
2016/12/01 Javascript
Angularjs实现分页和分页算法的示例代码
2016/12/23 Javascript
Node.js之网络通讯模块实现浅析
2017/04/01 Javascript
vue实现2048小游戏功能思路详解
2018/05/09 Javascript
javascript中的event loop事件循环详解
2018/12/14 Javascript
react koa rematch 如何打造一套服务端渲染架子
2019/06/26 Javascript
浅谈Vue为什么不能检测数组变动
2019/10/14 Javascript
解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)
2020/07/21 Javascript
在Python中如何传递任意数量的实参的示例代码
2019/03/21 Python
华为校园招聘上机笔试题 扑克牌大小(python)
2020/04/22 Python
pyqt5 使用cv2 显示图片,摄像头的实例
2019/06/27 Python
Python PyCharm如何进行断点调试
2019/07/05 Python
python实现的自动发送消息功能详解
2019/08/15 Python
使用PyTorch将文件夹下的图片分为训练集和验证集实例
2020/01/08 Python
如何解决tensorflow恢复模型的特定值时出错
2020/02/06 Python
django Model层常用验证器及自定义验证器详解
2020/07/15 Python
全面解析HTML5中的标准属性与自定义属性
2016/02/18 HTML / CSS
英国票务网站:Ticketmaster英国
2018/08/27 全球购物
教师求职信范文分享
2013/12/27 职场文书
优秀共青团员事迹材料
2014/12/25 职场文书
收入证明范本
2015/06/12 职场文书
使用python如何删除同一文件夹下相似的图片
2021/05/07 Python