Vue实现动态加载页面数据（下拉加载新数据）

---

1 设置数据

      //页面不同组的所有数据
      alldata:[],
      //当前的页数
      page: 1,

2 更新页面格式

  <div >
<!--    嵌套for循环实现动态加载-->
    <div class="Allcontent" v-for="(da,index) in alldata" :key="index">
      <OurArticleCard v-for="(item,index) in da" :key="index" :item="item"/>
    </div>
  </div>

3 设置监听

  mounted() {
  //数据获取方法
    this.getAticlePage(1, 10);
    window.addEventListener('scroll', this.getScrollLoding) // 监听页面滚动
  },

4 写监听方法

    //页面滚动监听方法
    getScrollLoding() {
      //获取滚动距离
      let scrolllen = document.documentElement.scrollTop;
      //获取当前页数
      let page = this.page
      //大于指定距离就请求数据（这个指定距离需要你自行调试的）
      if (scrolllen > 1690 * page) {
        this.getAticlePage(page + 1, 10)
        //增加页数计数
        this.page = page + 1
      }
    },

5 更新数据请求方法

getAticlePage(currPage, pageSize) {
      let that = this;
      let data = {
        currPage: currPage,
        pageSize: pageSize,
        search: {
          content: "",
          title: "",
          tag: "",
        }
      }
      getAllArticle_User(data).then((res) => {
        //将获取的数据重新放在一个大的数组中
        that.alldata.push(res.data.data.pageDataList)
      })
    },

6查看效果