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

Yui_NIE

于 2024-03-28 20:50:34 发布

阅读量142

点赞数 2

文章标签：前端

本文链接：https://blog.csdn.net/Yui_NIE/article/details/137123714

版权

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

摘要由CSDN通过智能技术生成

<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;
		}
	}