基于vue2实现上拉加载功能

本文实例为大家分享了vue2实现上拉加载展示的具体代码，供大家参考，具体内容如下

因为我们项目中，还用了swiper。很多都是滑动切换的，但是又得上拉加载，所以导致，很多UI框架，我们用了，都有不同的bug出现，没办法，最后写了一个。代码如下（这个因为很多地方会用，所以建议放在components/common下面）：

  .loadmore{
    width:100%;
  }

然后哪个页面需要，在哪个页面导入即可：import LoadMore from './../common/loadmore.vue';在需要引入他的页面写法如下：

然后在此页面的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;
    },
  }

这样就完成了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。