基于vue2实现上拉加载功能

发布时间：2020-12-17 02:42:00 所属栏目：百科来源：网络整理

导读：本文实例为大家分享了vue2实现上拉加载展示的具体代码，供大家参考，具体内容如下因为我们项目中，还用了swiper。很多都是滑动切换的，但是又得上拉加载，所以导致，很多UI框架，我们用了，都有不同的bug出现，没办法，最后写了一个。代码如下（这个因为很

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

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

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

这里写你需要的另外的模块

然后在此页面的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(() => {
  要使用的后台返回的数据写在setTimeout里面
     this.$nextTick(() => {
      this.loading = false;
    })
  },1000)
 });
},handleBottomChange(status) {
  this.bottomStatus = status;
},}

这样就完成了。

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!