vue上拉加载新数据每次加载10条

最新推荐文章于 2023-04-26 18:16:04 发布

sslcsq

最新推荐文章于 2023-04-26 18:16:04 发布

阅读量2.4k

点赞数 2

文章标签： vue

本文链接：https://blog.csdn.net/sslcsq/article/details/105206695

版权

<template>
  <div>
      <div class="banner">
          <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item><img src="/static/img/banner_01.jpg" alt=""></van-swipe-item>
            <van-swipe-item><img src="/static/img/banner_01.jpg" alt=""></van-swipe-item>
            <van-swipe-item><img src="/static/img/banner_01.jpg" alt=""></van-swipe-item>
            <van-swipe-item><img src="/static/img/banner_01.jpg" alt=""></van-swipe-item>
          </van-swipe>
      </div>
      <div class="tp">
          <img src="/static/img/banner_02.jpg" alt="">
      </div>
      <div class="list">
          <ul>
              <li v-for="(e,i) in list" :key="i">
                  <img v-lazy="e.img"/>
                  <!-- 图片懒加载 -->
                  <div>
                      <p class="p1">{{e.t1}}</p>
                  <p class="p2">
                      <span>{{e.t2}}</span>
                      <s>{{e.t3}}</s>
                  </p>
                  <p class="p3">
                      <span>{{e.t4}}</span>
                  </p>
                  </div>
              </li>
          </ul>
          <div v-show="loading"><van-loading type="spinner" /></div>
          <span>{{sj}}</span>
      </div>
  </div>
</template>

<script>
export default {
    data()
    {
        return{
            list:[],
            page:0,
            number:10,
            loading:true,
            sj:"",
            all:""
        }
    },
    methods:{
        	lazyLoading () { // 滚动到底部，再加载的处理事件
            let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            let clientHeight = document.documentElement.clientHeight;
            let scrollHeight = document.documentElement.scrollHeight;
            if (scrollTop + clientHeight >= scrollHeight) { // 滚动到底部，逻辑代码
                //事件处理
                console.log("我已经滚动到底部了触发这个事件了")//此处可以添加数据请求

                setTimeout(()=>{

                          this.page=this.page+10
                this.number=this.number+10
                this.$axios.get("/static/data.json").then((res)=>{
           var data=res.data.list.slice(this.page,this.number);
           data.forEach((e)=>{
               this.list.push(e)
           })
        })

                if(this.list.length>=this.all)
                {
                    this.loading=false
                    this.sj="数据加载完毕"
                }
                },1500)


                }
        }
    },
    mounted()
    {
     
        window.addEventListener('scroll', this.lazyLoading); // 滚动到底部，再加载的处理事件
        this.$axios.get("/static/data.json").then((res)=>{
            this.all=res.data.list.length
            this.list=res.data.list.slice(this.page,this.number);
        })
    }
}
</script>

<style lang="scss" scoped>
.banner{
    width: 100%;
    img{
        width: 100%;
    }
}
.list{
    width: 100%;
    ul{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        li{
            width: 48%;
            img{
                width: 100%;
                display: block;
            }
            div{
                padding: 10px;
                .p1{
                    line-height: 40px;
                    border-bottom: 1px solid #eee;
                }
                .p2{
                    line-height: 40px;
                    span{
                        font-size: 0.24rem;
                        font-weight: 700;
                        color: red;
                    }
                }
                .p3{
                    width: 100%;
                    span{
                        display: inline-block;
                        padding: 4px;
                        border: 1px solid orangered;
                        color: orangered;
                        border-radius: 4px;
                    }
                }
            }
        }
    }
}
</style>

默认显示几条和每次加载几条page 和 number自定义