上下滚动跑马灯，溢出省略隐藏，可绑定点击事件

原创于 2024-03-28 20:50:34 发布 · 205 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端

本文介绍了如何在Vue项目中使用Swiper组件实现一个高度可定制的垂直滚动轮播效果，展示内容列表并通过点击事件触发操作。重点涉及CSS样式和组件绑定的动态内容显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<swiper class="swiper" vertical circular autoplay interval="2000" display-multiple-items='1'>
				<swiper-item v-for="item in contentList" :key="item.id" @click="notice(item.id)">
					<view class="box">
						<view>{{item.title}}</view>
					</view>
				</swiper-item>
			</swiper>

.swiper {
		width: 500rpx;
		height: 50rpx;
		margin: 50rpx auto;

	}

	.box {
		font-size: 20rpx;
		height: 50rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 10rpx;
		color: white;

		view {
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
	}