实现滑动到中间变大的效果

一，实现的效果

二，实现的原理

然后加上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;
			}
		}