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