横向scroll实现图片滑动

最新推荐文章于 2024-04-09 16:33:35 发布

超级cj

最新推荐文章于 2024-04-09 16:33:35 发布

阅读量378

点赞数 1

分类专栏： uniapp

本文链接：https://blog.csdn.net/mlfdgs/article/details/118933830

版权

vue.js

uniapp 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

效果

在这里插入图片描述

view部分

<scroll-view scroll-x="true" class="scroll-row">
			<view class="scroll-row-item">
				<image src="../../static/images/book.jpg" mode=""></image>
				<view class="name">
					爱，死亡和机器人2
				</view>
				<view class="onstudy">
					9045人在学
				</view>
			</view>
			<view class="scroll-row-item">
				<image src="../../static/images/book.jpg" mode=""></image>
				<view class="name">
					爱，死亡和机器人2
				</view>
				<view class="onstudy">
					9045人在学
				</view>
			</view>
			<view class="scroll-row-item">
				<image src="../../static/images/book.jpg" mode=""></image>
				<view class="name">
					爱，死亡和机器人2
				</view>
				<view class="onstudy">
					9045人在学
				</view>
			</view>
			<view class="scroll-row-item">
				<image src="../../static/images/book.jpg" mode=""></image>
				<view class="name">
					爱，死亡和机器人2
				</view>
				<view class="onstudy">
					9045人在学
				</view>
			</view>
			<view class="scroll-row-item">
				<image src="../../static/images/book.jpg" mode=""></image>
				<view class="name">
					爱，死亡和机器人2
				</view>
				<view class="onstudy">
					9045人在学
				</view>
			</view>
			<view class="scroll-row-item">
				<image src="../../static/images/book.jpg" mode=""></image>
				<view class="name">
					爱，死亡和机器人2
				</view>
				<view class="onstudy">
					9045人在学
				</view>
			</view>
		</scroll-view>

css部分

.scroll-row {
		margin-top: 36rpx;
		width: 100%;
		white-space: nowrap;
		box-sizing: border-box;
		padding: 0 0 0 40rpx;
	}
	
	.scroll-row-item {
		display: inline-block;
		vertical-align: top;
		margin-right: 40rpx;
		width: 168rpx;
		
		image {
			width: 168rpx;
			height: 230rpx;
		}
		
		.name {
			margin-top: 20rpx;
			font-size: 28rpx;
			white-space:pre-line;
		}
		
		.onstudy {
			margin-top: 32rpx;
			font-size: 24rpx;
			color: #9d9d9d;
		}
	}