vue给某元素设置滚动到底部触发事件（给元素添加overflow:scroll时的问题）

最新推荐文章于 2025-04-12 15:38:14 发布

原创最新推荐文章于 2025-04-12 15:38:14 发布 · 3.9k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文介绍了一个Vue项目的实现细节，特别是如何在元素滚动到底部时触发加载更多数据的功能，同时展示了如何使用Vue的生命周期钩子和事件监听来实现这一功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在vue中如果你给某元素设置overflow:auot或者overflow:scroll时这样可以让超出可视区的内容可以滚动
但是如果这个时候在给让设置滚动到底部触发事件会有问题那就是只要你滚动就是立即触发这个事件
所以基于这点我改了一下代码效果不错
直接上代码

<template>
  <div class="list">
    <div class="header">
      <img src="/static/img/1_01.jpg" alt="">
    </div>
    <div class="main">
      <div class="left">
        <ul>
           <li v-for="(e,i) in left" :key="i" @click="save(e.id)" :class="active==e.id?'active':''">
             <span>{{e.title}}</span>
           </li>
        </ul>
      </div>
      <div class="right" @scroll="scrollEvent">
        <div class="banner">
          <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item><img src="/static/img/img_20.gif" alt=""></van-swipe-item>
            <van-swipe-item><img src="/static/img/img_20.gif" alt=""></van-swipe-item>
            <van-swipe-item><img src="/static/img/img_20.gif" alt=""></van-swipe-item>
            <van-swipe-item><img src="/static/img/img_20.gif" alt=""></van-swipe-item>
          </van-swipe>
        </div>
        <ul>
          <li v-for="(e,i) in list" :key="i">
            <img :src="e.img" alt="">
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data()
  {
    return{
      left:[],
      list:[],
      active:0
    }
  },
  methods:{
    scrollEvent(e){
        if(e.srcElement.scrollTop+e.srcElement.offsetHeight>e.srcElement.scrollHeight-100){ 
          console.log("啦啦啦啦啦触发了") 
          this.active=this.active+1;
          //加载更多
        }

      },
    save(id)
    {
      //this.list=[];
      this.active=id; 
    }
  },
  mounted()
  {
    this.$axios.get("/static/data.json").then((res)=>{
      this.left=res.data.left
    })

      this.list=[];
      this.$axios.get("/static/data.json").then((res)=>{
        res.data.list.forEach((e)=>{
          if(e.pid==this.active)
          {
            this.list.push(e)
          }
        })
      })

  },
  watch:{
    active(val)
    {
      this.list=[];
      this.$axios.get("/static/data.json").then((res)=>{
        res.data.list.forEach((e)=>{
          if(e.pid==val)
          {
            this.list.push(e)
          }
        })
      })
    } 
  }
}
</script>

<style lang="scss" scoped>
.active{
  background: white;
  border-left: 2px solid red;
}
.list{
  width: 100%;
  height: 100%;
}
.header{
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  img{
    width: 100%;
  }
}
.main{
  width: 100%;
  height: 100%;
  margin-top: 1.05rem;
  display: flex;
  .left{
    width: 30%;
    height: 100%;
    background: #f2f2f2;
    padding-bottom: 2rem;
    position: fixed;
    left: 0;
    overflow: auto;
    ul{
      width: 100%;
      li{
        width: 100%;
        line-height: 0.8rem;
        text-align: center;
      }
    }
  }
  .right{
    width: 70%;
    height: 100%;
    padding:0px 20px;
    padding-bottom: 1.8rem;
    position: fixed;
    right: 0;
    overflow: auto;
    .banner{
      width: 100%;
      img{
       width: 100%;
        height: 1.8rem;
      }
    }
    ul{
      width: 100%;
      li{
        width: 100%;
        img{
          width: 100%;
        height:1200px;
        }
      }
    }
  }
  .left::-webkit-scrollbar{
    display: none;
   }  //让出现的滚动条隐藏
  .right::-webkit-scrollbar{
    display: none;
   }
}
</style>

整理一下

<template>
  <div class="box" @scroll="scrollEvent">
    <ul>
	<li></li>
	……
	<li></li>
    </ul>
  </div>
<template>

export default {
    name: 'demo',
    data () {
      return {
        msg: '',
      }
    },
    methods: {
      scrollEvent(e){
        console.log(e)
      },
    }
}


.box{
    position: fixed;
    left: 0;
    overflow: auto
}

export default {
    name: 'demo',
    data () {
      return {
        msg: '',
      }
    },
    methods: {
      scroll(e){
        //滚动的像素+容器的高度>可滚动的总高度-100像素
        if(e.srcElement.scrollTop+e.srcElement.offsetHeight>e.srcElement.scrollHeight-100){ 
          this.loadMore();    //加载更多
        }
      },
    }
}

methods: {
      scroll(e){
        // !this.moreLoading 没有在加载状态，触发加载更多时，把this.moreLoading置未true
        // !this.noMore 没有更多的状态为false，当我们取到的数据长度小于1页的数量时，就没有更多了数据了，把 this.noMore置为true，这样就不会触发无意义的加载更多了
        if(e.srcElement.scrollTop+e.srcElement.offsetHeight>e.srcElement.scrollHeight-100 && !this.moreLoading && !this.noMore){
          this.loadMore();
        }
      },
    }

以上优点小bug更改一下


<template>
  <div class="list">
    <div class="header">
      <img src="/static/img/1_01.jpg" alt="">
    </div>
    <div class="main">
      <div class="left">
        <ul>
           <li v-for="(e,i) in left" :key="i" @click="save(e.id)" :class="active==e.id?'active':''">
             <span>{{e.title}}</span>
           </li>
        </ul>
      </div>
      <div class="right" @scroll="scrollEvent">
        <div class="banner">
          <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item><img src="/static/img/img_20.gif" alt=""></van-swipe-item>
            <van-swipe-item><img src="/static/img/img_20.gif" alt=""></van-swipe-item>
            <van-swipe-item><img src="/static/img/img_20.gif" alt=""></van-swipe-item>
            <van-swipe-item><img src="/static/img/img_20.gif" alt=""></van-swipe-item>
          </van-swipe>
        </div>
        <ul>
          <li v-for="(e,i) in list" :key="i">
            <img :src="e" alt="">
          </li>
        </ul>
        <van-loading type="spinner" color="#1989fa" v-show="loading"/>
      </div>
    </div>
 
  </div>
</template>

<script>
export default {
  data()
  {
    return{
      left:[],
      list:[],
      active:0,
      loading:false,
    }
  },
  methods:{
    scrollEvent(e){
        //console.log(e)
         let scrollTop = e.srcElement.scrollTop
            let clientHeight = e.srcElement.offsetHeight
            let scrollHeight = e.srcElement.scrollHeight
            if (scrollTop + clientHeight >= scrollHeight) { // 滚动到底部，逻辑代码
            setTimeout(()=>{
               this.loading=true
            console.log(111)
            this.active=this.active+1
            if(this.active>=this.left.length)
            {
              this.active=0;
            }
            },1500)
        }
      },
    // scrollEvent(e){
    //   this.loading=true
    //    setTimeout(()=>{
    //      //scrollTop + clientHeight >= scrollHeight
    //      //console.log(e)
    //      this.loading=false
    //     if(e.srcElement.scrollTop+e.srcElement.offsetHeight>e.srcElement.scrollHeight-100 && !this.loading){ 
    //       console.log("啦啦啦啦啦触发了") 
         
    //         this.active++;
    //         if(this.active>this.left.length)
    //         {
    //           this.active=0
    //         }
        
    //       //加载更多
    //     }
    //       },3000)

    //   },
    save(id)
    {
      //this.list=[];
      this.active=id; 
    }
  },
  mounted()
  {
    window.addEventListener('scroll', this.scrollEvent)
    this.$axios.get("/static/data.json").then((res)=>{
      this.left=res.data.left
    })

      this.list=[];
      this.$axios.get("/static/data.json").then((res)=>{
        res.data.list.forEach((e)=>{
          if(e.pid==this.active)
          {
            this.list=e.img
          }
        })
      })

  },
  watch:{
    active(val)
    {
      this.list=[];
      this.$axios.get("/static/data.json").then((res)=>{
        res.data.list.forEach((e)=>{
          if(e.pid==val)
          {
            this.list=e.img
          }
        })
      })
    } 
  }
}
</script>

<style lang="scss" scoped>
.active{
  background: white;
  border-left: 2px solid red;
}
.list{
  width: 100%;
  height: 100%;
}
.header{
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  img{
    width: 100%;
  }
}
.main{
  width: 100%;
  height: 100%;
  margin-top: 1.05rem;
  display: flex;
  .left{
    width: 30%;
    height: 100%;
    background: #f2f2f2;
    padding-bottom: 2rem;
    position: fixed;
    left: 0;
    overflow: auto;
    ul{
      width: 100%;
      li{
        width: 100%;
        line-height: 0.8rem;
        text-align: center;
      }
    }
  }
  .right{
    width: 70%;
    height: 100%;
    padding:0px 20px;
    padding-bottom: 1.8rem;
    position: fixed;
    right: 0;
    overflow: auto;
    .banner{
      width: 100%;
      img{
       width: 100%;
        height: 1.8rem;
      }
    }
    ul{
      width: 100%;
      li{
        width: 100%;
        img{
          width: 100%;
        }
      }
    }
  }
  .left::-webkit-scrollbar{
    display: none;
   }  //让出现的滚动条隐藏
  .right::-webkit-scrollbar{
    display: none;
   }
}
</style>