横向滚动如何实现？

最新推荐文章于 2024-05-29 15:53:40 发布

玉米米是一只喵~

最新推荐文章于 2024-05-29 15:53:40 发布

阅读量316

点赞数 2

分类专栏：小程序文章标签：小程序

本文链接：https://blog.csdn.net/limpid_changli/article/details/116014748

版权

小程序专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1)scroll-view实现

html结构如下：

		<scroll-view class="scroll" scroll-x="true"  style="height: 80px;">
			<view class="item" v-for="(item,index) in 5" :key="index">
				<view class="num">123</view>
			</view>
		</scroll-view>

scss样式如下：

	.scroll{
        overflow: hidden;
		white-space: nowrap;
        width: 100%;
		background-color: #ccc;
		.item{
			display: inline-block;
			height: 150rpx;
			width: 250rpx;
			background-color: pink;
			margin-left: 20rpx;
		}
	}

2)view实现

html结构如下：

		<view class="scroll">
			<view class="total-item" v-for="(item,index) in 5" :key="index">
				<view class="total-num">123</view>
			</view>
		</view>

scss样式如下：

	.scroll{
		overflow-x: auto;
		white-space: nowrap;
		width: 100%;
		height: 180rpx;
		background-color: #ccc;
		.total-item{
			display: inline-block;
			height: 150rpx;
			width: 250rpx;
			background-color: pink;
			margin-left: 20rpx;
		}
	}