<template>
<div class="page">
<LTab></LTab>
<div class="product" ref="scrollContainer">
<img src="../../assets/img/cpz.png" alt="" v-show="show" />
<div v-show="!show"><span>全民砍价</span><van-icon name="arrow" size="15" color="#000"></van-icon></div>
</div>
<div class="subject"><span>精选专题</span><van-icon name="arrow" size="15" color="#000"></van-icon></div>
<div class="scroll" :class="{ 'scroll-container': show }">
<ul>
<li v-for="item in newsList" :key="item.id">
<img :src="item.pic" alt="" />
<p v-html="item.title"></p>
<p>{{ item.descript }}</p>
</li>
</ul>
</div>
</div>
</template>
<script>
import LTab from './../../components/lb'
import { newsAPI } from './../../service/homepage.js'
export default {
components: { LTab },
data() {
return {
show: false,
newsList: [],
screenHeight: document.body.clientHeight // 获取页面高度
}
},
mounted() {
this.news()
//添加滚动监听事件
//在窗口滚动时调用监听窗口滚动方法
window.addEventListener('scroll', this.handleScroll)
},
destroyed() {
//离开页面时删除该监听
window.removeEventListener('scroll', this.handleScroll)
},
methods: {
//监听窗口滚动
handleScroll() {
const scrollTop = document.documentElement.scrollTop
const scrollContainer = this.$refs.scrollContainer
const containerTop = scrollContainer.offsetTop
const containerBottom = containerTop + scrollContainer.offsetHeight
if (scrollTop >= containerTop && scrollTop <= containerBottom) {
if (!this.show) {
this.show = true
scrollContainer.classList.add('scroll-container')
}
} else {
if (this.show) {
this.show = false
scrollContainer.classList.remove('scroll-container')
}
}
},
async news() {
const {
data: { data }
} = await newsAPI()
this.newsList = data
}
}
}
</script>
<style lang="scss" scope>
.scroll-container {
transform: translateZ(0);
}
.page {
.product {
width: 100%;
height: 50px;
display: flex;
align-items: center;
justify-content: space-evenly;
div {
width: 100%;
height: 50px;
display: flex;
align-items: center;
justify-content: space-evenly;
font-size: 16px;
span {
margin-left: 20px;
}
i {
margin-left: -120px;
}
}
img {
width: 40px;
height: 40px;
border-radius: 15%;
}
}
.subject {
width: 100%;
height: 50px;
display: flex;
align-items: center;
justify-content: space-evenly;
font-size: 16px;
z-index: 999;
border-top: 15px solid #f5f5f5;
img {
width: 40px;
height: 40px;
border-radius: 15%;
}
span {
margin-left: 20px;
}
i {
margin-left: -120px;
}
}
.scroll {
ul {
width: 100%;
display: flex;
overflow: auto;
li {
width: 330px;
height: 250px;
margin-left: 10px;
img {
width: 100%;
height: 180px;
border-radius: 5px;
}
p:nth-of-type(1) {
font-size: 13px;
color: #2c2c2c;
margin-top: 0.12rem;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
p:nth-of-type(2) {
font-size: 10px;
color: #a8a8a8;
margin-top: 0.2rem;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
}
}
</style>
滑动闪烁问题通常是由于频繁操作DOM引起的。为了彻底解决滑动闪烁问题,您可以考虑使用CSS的translate
属性来代替改变元素的定位属性,这将利用GPU加速来提高性能。
首先,您需要为滚动容器添加一个新的CSS类,并将其样式设置为使用translateZ(0)
来开启GPU加速:
.scroll-container { transform: translateZ(0); }
然后,在模板中为滚动容器添加这个CSS类:
<div class="scroll" :class="{ 'scroll-container': show }"> <!-- ... --> </div>
接下来,更新handleScroll
方法,不再直接改变元素的定位属性,而是添加或移除CSS类:
//监听窗口滚动
handleScroll() {
const scrollTop = document.documentElement.scrollTop
const scrollContainer = this.$refs.scrollContainer
const containerTop = scrollContainer.offsetTop
const containerBottom = containerTop + scrollContainer.offsetHeight
if (scrollTop >= containerTop && scrollTop <= containerBottom) {
if (!this.show) {
this.show = true
scrollContainer.classList.add('scroll-container')
}
} else {
if (this.show) {
this.show = false
scrollContainer.classList.remove('scroll-container')
}
}
},
通过使用CSS的translate
和开启GPU加速,可以显著减少滑动闪烁问题的发生,并提高页面的性能和流畅度。