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

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可以解决，这个我没有具体的再去实验下，若有好的方法，还请大家能够在评论里告知下，感激不尽