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调试说明
Jun 07 Javascript
jquery限定文本框只能输入数字即整数和小数
Nov 29 Javascript
jQuery表单域选择器用法分析
Feb 10 Javascript
JQuery select(下拉框)操作方法汇总
Apr 15 Javascript
JS实现带鼠标效果的头像及文章列表代码
Sep 27 Javascript
解决jquery插件:TypeError:$.browser is undefined报错的方法
Nov 21 Javascript
javascript实现网站加入收藏功能
Dec 16 Javascript
JS判断日期格式是否合法的简单实例
Jul 11 Javascript
[js高手之路]从原型链开始图解继承到组合继承的产生详解
Aug 28 Javascript
解决Vue 浏览器后退无法触发beforeRouteLeave的问题
Dec 24 Javascript
vue.js使用watch监听路由变化的方法
Jul 08 Javascript
JavaScript检测浏览器是否支持CSS变量代码实例
Apr 03 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
vBulletin HACK----显示话题大小和打开新窗口于论坛索引页
2006/10/09 PHP
php数组函数序列之array_combine() - 数组合并函数使用说明
2011/10/29 PHP
YII框架实现自定义第三方扩展操作示例
2019/04/26 PHP
获取页面高度,窗口高度,滚动条高度等参数值getPageSize,getPageScroll
2006/09/22 Javascript
异步加载script的代码
2011/01/12 Javascript
jQuery 操作option的实现代码
2011/03/03 Javascript
JS判定是否原生方法
2013/07/22 Javascript
以JSON形式将JS中Array对象数组传至后台的方法
2014/01/06 Javascript
js获取判断上传文件后缀名的示例代码
2014/02/19 Javascript
javascript跨域的方法汇总
2015/10/23 Javascript
EasyUI创建对话框的两种方式
2016/08/23 Javascript
利用fecha进行JS日期处理
2016/11/21 Javascript
JS实现向iframe中表单传值的方法
2017/03/24 Javascript
React-Router如何进行页面权限管理的方法
2017/12/06 Javascript
vue favicon设置以及动态修改favicon的方法
2018/12/21 Javascript
Vue框架TypeScript装饰器使用指南小结
2019/02/18 Javascript
[00:31]2016完美“圣”典风云人物:国士无双宣传片
2016/12/04 DOTA
[04:04]DOTA2亚洲邀请赛比赛场馆&酒店全攻略
2017/03/23 DOTA
[01:11:11]Alliance vs RNG 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
web.py获取上传文件名的正确方法
2014/08/26 Python
python 全局变量的import机制介绍
2017/09/07 Python
python合并同类型excel表格的方法
2018/04/01 Python
python实现校园网自动登录的示例讲解
2018/04/22 Python
Python日期格式和字符串格式相互转换的方法
2020/02/18 Python
Python selenium键盘鼠标事件实现过程详解
2020/07/28 Python
新闻记者实习自我鉴定
2013/09/19 职场文书
电气专业应届生求职信
2013/11/01 职场文书
毕业生自荐书模版
2014/01/04 职场文书
预备党员思想汇报范文
2014/01/11 职场文书
餐饮业员工工作决心书
2014/03/11 职场文书
荷叶母亲教学反思
2014/04/30 职场文书
2014年公务员工作总结
2014/11/18 职场文书
学生会宣传部竞选稿
2015/11/21 职场文书
《刷子李》教学反思
2016/02/20 职场文书
Python游戏开发实例之graphics实现AI五子棋
2021/11/01 Python