div中的内容上下连续滚动

最新推荐文章于 2024-07-05 09:50:50 发布

瞎想芸豆

最新推荐文章于 2024-07-05 09:50:50 发布

阅读量988

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/hiroomi/article/details/129324188

版权

这是一个使用Vue.js编写的垂直轮播组件，展示了一个包含图片、用户名称、赠送信息和时间戳的内容列表。每个滑块显示用户头像、被赠送人的名字、勋章类型以及赠送详情和时间。组件利用了Vue的v-for指令进行数据绑定，并设置了自动播放、间隔时间和持续时间。

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

<template>
    <view>
        <view class="fathBox"> 
            <swiper class="swiper" circular="true" vertical="true" display-multiple-items="3" :autoplay="autoplay" :interval="interval" :duration="duration">
                <swiper-item v-for="(item,index) in name" :key="index">
                   <view class="contentBox_1">
                   	<view class="contentleftBox">
                   		<image src="../../static/images/tx1.png"></image>
                   	</view>
                   	<view class="contentrightBox">
                   		<view class="content_1">{{item}}</view>
                   		<view class="content_2">
                   			<text class="text_1">赠与</text>
                   			<text class="text_2">杨洋</text>
                   			<text class="text_3">一枚</text>
                   			<text class="text_4">服务勋章</text>
                   		</view>
                   		<view class="content_3">
                   			<view class="medalImg">
                   				<image src="../../static/icon/服务.png"></image>
                   			</view>
                   			<view class="medalText">
                   				<text>杨洋于2月10日协助我进行勋章小程序项目UI设计，非常感谢其对我工作上的帮助。</text>
                   			</view>
                   		</view>
                   		<view class="content_4">
                   			2023-02-22    15:23:56
                   		</view>
                   	</view>
                   </view>
                </swiper-item>
            </swiper>
        </view>
    </view>
</template>

<script>
    export default{
        data(){
            return{
                autoplay:true,
                interval:4000,
                duration:3000,
				name:['王一','王二','杀杀杀','钱钱钱','哦哦哦','事实上我']
            }
        },
    }
</script>

<style>
	.swiper{
	    height: 1050rpx;
		background-color: #3B2BB8;
	}
	.fathBox{
			width: 100%;
			height: 1050rpx;
			overflow: hidden;
			background-color: saddlebrown;
		}
		/* 内容容器 */
		.contentBox_1{
			width: 94%;
			height: 330rpx;
			background-color: #FFFFFF;
			border-radius: 10rpx;
			margin: 0 auto;
			display: flex;
			flex-direction: row;
		}
		/* 赠送动态 */
		.contentleftBox{
			width: 20%;
			display: flex;
			justify-content: center;
			margin-top: 20rpx;
		}
		.contentleftBox image{
			width: 76rpx;
			height: 76rpx;
			margin: 0 auto;
			border-radius: 76rpx;
		}
		.contentrightBox{
			display: flex;
			flex-direction: column;
			width: 80%;
			margin-top: 20rpx;
		}
		.content_1{ 	/* 名字 */
			font-size: 34rpx;
			font-weight: normal;
			color: #5BA9F7;
			margin-bottom: 20rpx;
		}
		.text_1,.text_3{ /* 赠与，一枚 */
			font-size: 32rpx;
		}
		.text_2{ 	/* 被赠送人 */
			font-size: 32rpx;
			color: #3B2BB8;
			margin: 0 12rpx;
		}
		.text_4{ 	/* 勋章类型 */
			font-size: 32rpx; 
			font-weight: 900;
		}
		.content_3{
			display: flex;
			flex-direction: row;
			margin-top: 14rpx;
			align-items: center;
		}
		.medalImg{
			width: 20%;
		}
		.medalImg image{
			width: 112rpx;
			height: 112rpx;
		}
		.medalText{
			width: 74%;
			font-size: 30rpx;
			font-weight: normal;
			color: #666666;
			margin-left: 20rpx;
			text-indent:1.5em;
			overflow:hidden; /*溢出的部分隐藏*/
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 3;
			text-overflow:ellipsis;/*ellipsis:文本溢出显示省略号（...）*/
		}
		.content_4{		/* 时间 */
			font-size: 26rpx;
			font-weight: normal;
			color: #979797;
			margin-top: 10rpx;
			margin-right: 20rpx;
			text-align: right;
		}
</style>