本文实例为大家分享了vue2实现上拉加载展示的具体代码，供大家参考，具体内容如下
因为我们项目中，还用了swiper。很多都是滑动切换的，但是又得上拉加载，所以导致，很多UI框架，我们用了，都有不同的bug出现，没办法，最后写了一个。代码如下（这个因为很多地方会用，所以建议放在components/common下面）：
然后哪个页面需要，在哪个页面导入即可：import LoadMore from './../common/loadmore.vue';在需要引入他的页面写法如下：
显示一张加载的gif图
然后在此页面的data里和methods设置如下：
},data () {
return {
// 上拉加载数据
scrollHeight: 0,scrollTop: 0,containerHeight: 0,loading: false,allLoaded: false,bottomText: '上拉加载更多...',bottomStatus: '',pageNo: 1,totalCount: '',}
},methods: {
/* 下拉加载 */
_scroll: function(ev) {
ev = ev || event;
this.scrollHeight = this.$refs.innerScroll.scrollHeight;
this.scrollTop = this.$refs.innerScroll.scrollTop;
this.containerHeight = this.$refs.innerScroll.offsetHeight;
},loadBottom: function() {
this.loading = true;
this.pageNo += 1; // 每次更迭加载的页数
if (this.pageNo == this.totalGetCount) {
// 当allLoaded = true时上拉加载停止
this.loading = false;
this.allLoaded = true;
}
api.commonApi(后台接口，请求参数) 这个api是封装的axios有不懂的可以看vue2+vuex+axios那篇文章
.then(res => {
setTimeout(() => {
要使用的<a href="https://www.jb51.cc/tag/houtai/" target="_blank" class="keywords">后台</a>返回的数据写在setTimeout里面
this.$nextTick(() => {
this.loading = false;
})
},1000)
});
},handleBottomChange(status) {
this.bottomStatus = status;
},}
这样就完成了。
原文链接：https://www.f2er.com/vue/34994.html