本文实例为大家分享了vue2实现上拉加载展示的具体代码，供大家参考，具体内容如下
因为我们项目中，还用了swiper。很多都是滑动切换的，但是又得上拉加载，所以导致，很多UI框架，我们用了，都有不同的bug出现，没办法，最后写了一个。代码如下（这个因为很多地方会用，所以建议放在components/common下面）：
rush:xhtml;">
ottom">
然后哪个页面需要，在哪个页面导入即可：import LoadMore from './../common/loadmore.vue';在需要引入他的页面写法如下：
rush:xhtml;">
ottom-method="loadBottom"
:bottom-all-loaded="allLoaded"
:bottompullText='bottomText'
:auto-fill="false"
@bottom-status-change="handleBottomChange"
ref="loadmore">
这里写你需要的另外的模块
然后在此页面的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)
});
},handleB<a href="https://www.jb51.cc/tag/ott/" target="_blank" class="keywords">ott</a>omChange(status) {
this.b<a href="https://www.jb51.cc/tag/ott/" target="_blank" class="keywords">ott</a>omStatus = status;
},}
这样就完成了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
