这篇文章主要为大家详细介绍了基于vue2实现上拉加载功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue2实现上拉加载展示的具体代码，供大家参考，具体内容如下
因为我们项目中，还用了swiper。很多都是滑动切换的，但是又得上拉加载，所以导致，很多UI框架，我们用了，都有不同的bug出现，没办法，最后写了一个。代码如下（这个因为很多地方会用，所以建议放在components/common下面）：
然后哪个页面需要，在哪个页面导入即可：import LoadMore from './../common/loadmore.vue';在需要引入他的页面写法如下：
这里写你需要的另外的模块
这个p是为让上拉加载的时候显示一张加载的gif图 @@##@@
然后在此页面的data里和methods设置如下：
立即学习“前端免费学习笔记（深入）”；
export default {
name: 'FinancialGroup',
props:{
},
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(() => {
要使用的后台返回的数据写在setTimeout里面
this.$nextTick(() => {
this.loading = false;
})
}, 1000)
});
},
handleBottomChange(status) {
this.bottomStatus = status;
},
}上面是我整理给大家的，希望今后会对大家有帮助。
Modoer多功能点评系统2.5 精华版 Build 20110710 UTF8
下载
Modoer 是一款以本地分享，多功能的点评网站管理系统。采用 PHP+MYSQL 开发设计，开放全部源代码。因具有非凡的访问速度和卓越的负载能力而深受国内外朋友的喜爱，不局限于商铺类点评，真正实现了多类型的点评，可以让您的网站点评任何事与物，同时增加产品模块，也更好的网站产品在网站上展示。Modoer点评系统 2.5 Build 20110710更新列表1.同步 旗舰版系统框架2.增加 限制图片
相关文章：
