一，实现的效果
二，实现的原理
然后加上transition: 1s;的效果，就可以啦~
三，具体的相关代码
html:
<!-- 微博热搜模块 -->
<scroll-view class="weibo_hot" scroll-y @scroll="handleScroll" show-scrollbar="false">
<view class="header_item"></view>
<view :class="['weibo_box',activeIndex==index?'active':'']" v-for="(item,index) in weiboHotList" :key="index" >
{
{
item.content}}
</view>
<view class="footer_item"></view>
</scroll-view>
js：
<script>
export default{
data(){
return {
weiboHotList:[],
activeIndex:0
}
},
methods:{
handleScroll(event){
console.log("滚动条滚动",event.detail.scrollTop)
this.activeIndex=Math.round((event.detail.scrollTop)/75)
},
}
}
</script>
css:
.weibo_hot{
height: 450rpx;
.weibo_box{
height: 150rpx;
line-height: 150rpx;
text-align: center;
font-size: 10rpx;
transition: 1s;
opacity: 0.3;
}
.header_item,.footer_item{
height: 150rpx;
}
.active{
font-size: 40rpx;
font-weight: 700;
opacity: 1;
}
}