基于vue2实现上拉加载功能(2)
然后哪个页面需要,在哪个页面导入即可:import LoadMore from './../common/loadmore.vue';在需要引入他的页面写法如下:
<template> <section class="finan"> <!-- 上拉加载更多 --> <load-more :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :bottomPullText='bottomText' :auto-fill="false" @bottom-status-change="handleBottomChange" ref="loadmore"> <div> 这里写你需要的另外的模块 </div> <div v-show="loading" slot="bottom" class="loading"> 这个div是为让上拉加载的时候显示一张加载的gif图 <img src="./../../assets/main/uploading.gif"> </div> </load-more> </section> </template>
然后在此页面的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; }, }
这样就完成了。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持黑区网络。