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

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

sslcsq

3865人浏览 · 2020-04-02 16:33:10

sslcsq · 2020-04-02 16:33:10 发布

在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>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

Vue

echarts堆叠柱状图

Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

Vue

所有评论(0)

查看更多评论

sslcsq

@sslcsq

已为社区贡献5条内容