移动端上拉加载和下拉刷新的vue插件
做一个简单的移动端展示项目，后台分页后前端加载，实现上拉加载下一页，找了下，还是用这个mescroll.js插件好一点
1.npm安装
npm install --save mescroll.js / yarn add mescroll.js //不要使用cnpm安装
2.导入(在哪个页面使用,则在哪个页面导入)：
import MescrollVue from ‘mescroll.js/mescroll.vue’
注册组件：
components: { MescrollVue} // 注册mescroll组件
3.template使用
<mescroll-vue ref="mescroll" :down="mescrollDown" :up="mescrollUp" @init="mescrollInit" class="scrollView"></mescroll-vue>
4.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:"../assets/logo.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:"../assets/logo.png", //图标,默认null,支持网络图
tip:"暂无相关数据~" //提示
}
},
articleList: [], // 列表数据
}
}
5.style样式
.mescroll { position: fixed; padding-bottom: 1rem; top: 2px; bottom: 0; height: auto;}
具体的配置可以参考：mescroll配置
6.scroll属性在ios手机上回出现卡顿问题
在进行滚动的这个容器样式中添加这个属性：
-webkit-overflow-scrolling:touch;
填加了这个兼容会导致定位为position：fixed的失去效果，使用position：absolute可以解决.
