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 布尔型分析
Dec 22 Javascript
23个Javascript弹出窗口特效整理
Feb 25 Javascript
JS复制到剪贴板示例代码
Oct 30 Javascript
移动端js图片查看器
Nov 17 Javascript
Vue.js第四天学习笔记(组件)
Dec 02 Javascript
jQuery事件与动画基础详解
Feb 23 Javascript
JS 调试中常见的报错问题解决方法
May 20 Javascript
javascript+css3开发打气球小游戏完整代码
Nov 28 Javascript
关于vue面试题汇总
Mar 20 Javascript
小程序数据通信方法大全(推荐)
Apr 15 Javascript
vue+elementUI 复杂表单的验证、数据提交方案问题
Jun 24 Javascript
vue 项目中当访问路由不存在的时候默认访问404页面操作
Aug 31 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把数据表导出为Excel表的最简单、最快的方法(不用插件)
2014/05/10 PHP
php生成gif动画的方法
2015/11/05 PHP
thinkphp框架实现数据添加和显示功能
2016/06/29 PHP
PHP new static 和 new self详解
2017/02/19 PHP
PHP-FPM 的管理和配置详解
2019/02/17 PHP
Laravel5框架自定义错误页面配置操作示例
2019/04/17 PHP
javascript之typeof、instanceof操作符使用探讨
2013/05/19 Javascript
jQuery简单实现禁用右键菜单
2015/03/10 Javascript
JavaScript获取当前url根目录(路径)
2016/06/17 Javascript
利用Angularjs实现幻灯片效果
2016/09/07 Javascript
bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法
2017/02/10 Javascript
Angular5中调用第三方js插件的方法
2018/02/26 Javascript
webpack中如何使用雪碧图的示例代码
2018/11/11 Javascript
微信小程序中使用echarts的实现方法
2019/04/24 Javascript
JS字符串常用操作方法实例小结
2019/06/24 Javascript
js动态获取时间的方法分析
2019/08/02 Javascript
JavaScript键盘事件响应顺序详解
2019/09/30 Javascript
使用python加密自己的密码
2015/08/04 Python
python按比例随机切分数据的实现
2019/07/11 Python
解决python flask中config配置管理的问题
2019/07/26 Python
树莓派4B+opencv4+python 打开摄像头的实现方法
2019/10/18 Python
python list多级排序知识点总结
2019/10/23 Python
Python求解正态分布置信区间教程
2019/11/20 Python
CSS3 box-shadow属性实例详解
2020/06/19 HTML / CSS
深入理解HTML的FormData对象
2016/05/17 HTML / CSS
ktv中秋节活动方案
2014/01/30 职场文书
家具促销活动方案
2014/02/16 职场文书
安全承诺书范文
2014/03/26 职场文书
青春飞扬演讲稿
2014/09/11 职场文书
四风问题班子对照检查材料
2014/09/27 职场文书
学习党的群众路线剖析材料
2014/10/09 职场文书
2014年学校德育工作总结
2014/12/05 职场文书
培根随笔读书笔记
2015/07/01 职场文书
导游词之宿迁乾隆行宫
2019/10/15 职场文书
五年级作文之劳动作文
2019/11/12 职场文书
python随机打印成绩排名表
2021/06/23 Python