关于vue分页加载、通过监听滚动条方式分页，单页vue

闲来无事垂钓

已于 2022-11-15 16:19:03 修改

阅读量2.1k

点赞数

分类专栏： vue学习笔记文章标签： vue.js 前端 javascript vue分页 vue3

于 2022-10-20 14:32:10 首次发布

本文链接：https://blog.csdn.net/qq_39109182/article/details/127425352

版权

vue学习笔记专栏收录该内容

20 篇文章 2 订阅

订阅专栏

准备工作vue官方文档介绍 — Vue.js

<script src="https://fastly.jsdelivr.net/npm/vue@2"></script>
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/axios"></script>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

<style>
*{padding:0;margin:0;border: 0;}
ul li{height:100px;border:1px solid #000;margin:15px auto;text-align: center;}
.loading{background:#fff;position: fixed;right:0;top:0;width:100%;height:100%}
.loading img{display: block;width:30%;height:auto;margin:50% auto}
</style>
<title></title>
</head>

<body>
<div id="app" >
    <div v-if="loading" class="loading"><img src="images/load.png"></div>
    <ul>
        <li v-for="(item,index) in pageData" :key="index"> {{item.name}} </li>
    </ul>
</div>
</body>
</html>

vue2 通过监听默认滚动条事件来加载下一页数据

<script>
Vue.config.productionTip = false //关闭开发版提示
new Vue({
  el: '#app',
  data: function() {
    return { 
      loading:true, //loading
      pageData:[],//接口返回列表数据
      totalpage:'',//总页数
      params:{//传给接口的参数
        page: 1 ,
        pcount:15
      },
    }
  },

  mounted() {
      this.getPage(this.params)//数据
      window.addEventListener('scroll', this.windowScroll,true)//监听滚动条事件
  },
  methods: {
    //请求接口方法  常规的ajax方式(用这种需要引用jquery)
    getPage(params){
        $.ajax({
            url:'接口地址',
            headers:{'Content-Type':'application/x-www-form-urlencoded'},
            data:params,
            type: 'POST',
            dataType: 'JSON',
            success: res => {
                this.loading = false
                if(res.status == 200 ){
                    //接口没有返回总页数，所以这里自己计算 总页数= 数据总数 / 每页数量（比如一页15条）
                    this.totalpage = Math.ceil(res.data.count / params.pcount);

                    if(res.data.count == 0){
                        console.log('无数据 处理逻辑')
                    }else{
                        if(this.totalpage >= params.pcount){
                            console.log('加载下一页')
                            let listData = this.pageData.concat(res.data.list);
                            // console.log('listData',listData)
                            this.pageData=listData
                            this.params.page += 1;
                        }else{
                            console.log('不够一页')
                            this.pageData=res.data.list
                        }
                        //加载数据可以触发
                        this.isRefreshLock=true
                    }
                }else{
                    console.log('200以外的情况 处理逻辑')
                }
            },
        })
    }

    //用axios这种方式也可以 ，这种不用在引用jquery 
    // async getApiData (params) {
    // const headers = {
    //     headers:{
    //       'token':123,
    //    }
    //   }
    //   await axios.post('接口地址'
    //   ,参数,headers)
    //   .then((res) => {
    //     console.log('res',res)
    //   })
    // },

    //滚动条事件
    windowScroll(e) {
      //滚动条滚动时距离顶部的距离
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      //可视区的高度
      let windowHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      //滚动条的总高度
      let scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight;
      //滚动条到底部的条件
      // console.log(scrollTop + windowHeight + "--" + scrollHeight);
      if ( scrollTop + windowHeight >= scrollHeight - 200 && this.isRefreshLock) {
        if(this.totalpage >= this.params.page){
            // false防止多次触发加载数据
            this.isRefreshLock = false;
            this.getPage(this.params)
        }else{
            console.log('没有更多数据了')
        }
      }
    },

  },

  beforeDestroy() {
     console.log('beforeDestroy')
    //销毁页面时移除监听事件
 	 window.removeEventListener('scroll', this.windowScroll)
  }

})
</script>

vue3通过监听滚动条方式分页

html部分和2的一样这里就不贴代码了，只贴js部分

<script src="https://fastly.jsdelivr.net/npm/vue@3"></script>
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/axios"></script>
<script type="text/javascript">
const { createApp, reactive, toRefs, ref, watch, onMounted ,onBeforeMount} = Vue;
const app = createApp({
    setup() {
        const params=ref({page:1,pcount:15})//接口需要的参数
        const list=ref([])//列表数据
        const totalpage =ref(0)//总页码
        const loading=ref(false)//页面加载loading
        const isRefreshLock=ref(false)//防止触底重复触发

        onMounted(() => {
          getApiData(params.value)//调用请求接口方法
          window.addEventListener('scroll', windowScroll, true)//监听滚动条
        }),

        const getApiData = async(params2) => {
            await axios.post('接口地址', params2).then((res) => {
                console.log('res',res)
                if(res.status == 200 ){
                    //接口没有返回总页数，所以这里自己计算 总页数= 数据总数 / 每页数量（比如一页15条）
                    totalpage.value = Math.ceil(res.data.count / params.pcount);

                    if(res.data.count == 0){
                        console.log('无数据 处理逻辑')
                    }else{
                        if(totalpage.value >= params2.page){
                            console.log('加载下一页')
                            list.value=[...list.value,...res.data.data.list]
                            // console.log('list.value',list.value)
                            // console.log(params.value)
                            loading.value = true
                            //加载数据可以触发
                            isRefreshLock.value=true
                            //返回数据后页码加一
                            params.value.page +=1
                        }else{
                            console.log('不够一页')
                            list.value=res.data.data.list
                        }
                        //加载数据可以触发
                        this.isRefreshLock=true
                    }
                }else{
                    console.log('200以外的情况 处理逻辑')
                }
           })
        },
       const windowScroll= (e) =>{
          // console.log(e)
          let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
          //可视区的高度
          let windowHeight =
            document.documentElement.clientHeight || document.body.clientHeight;
          //滚动条的总高度
          let scrollHeight =
            document.documentElement.scrollHeight || document.body.scrollHeight;
          //滚动条到底部的条件
          //console.log(scrollTop ,'=======', windowHeight + "--" + scrollHeight);
          if ( scrollTop + windowHeight >= scrollHeight - 200 && isRefreshLock.value == true) {
              if(totalpage.value >= params.value.page){
                // false防止多次触发加载数据
                isRefreshLock.value = false;
                getApiData(params.value)
              }else{
                console.log('没有更多数据了')
              }
           }
        },

      return{
        params,
        totalpage,
        list,
        loading,
      },

    }
})

app.mount("#app");
</script>