大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
这篇文章主要为大家展示了“基于vue2如何实现上拉加载功能”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“基于vue2如何实现上拉加载功能”这篇文章吧。
创新互联建站是一家集网站建设,科尔沁左翼企业网站建设,科尔沁左翼品牌网站建设,网站定制,科尔沁左翼网站建设报价,网络营销,网络优化,科尔沁左翼网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。
具体内容如下
因为我们项目中,还用了swiper。很多都是滑动切换的,但是又得上拉加载,所以导致,很多UI框架,我们用了,都有不同的bug出现,没办法,最后写了一个。代码如下(这个因为很多地方会用,所以建议放在components/common下面):
然后哪个页面需要,在哪个页面导入即可:import LoadMore from './../common/loadmore.vue';在需要引入他的页面写法如下:
这里写你需要的另外的模块这个div是为让上拉加载的时候显示一张加载的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; }, }
这样就完成了。
以上是“基于vue2如何实现上拉加载功能”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!