学习uniapp scroll-view组件的使用

template部分

<template>
	<view>
		<!-- 滚动可视区域 -->
		<scroll-view class="scroll" scroll-x>
			                   <!-- scroll-x 是放在组件中的不在css里面  作用是横向滑动 -->
			<view class="group">
				<view class="item">
					<view class="textitem1">9.14</view>
					<view class="textitem2">周六</view>
				</view>
				<view class="item">
					<view class="textitem1">9.15</view>
					<view class="textitem2">周日</view>
				</view>
				<view class="item">
					<view class="textitem1">9.16</view>
					<view class="textitem2">周一</view>
				</view>
				<view class="item">
					<view class="textitem1">9.17</view>
					<view class="textitem2">周二</view>
				</view>
				<view class="item">
					<view class="textitem1">9.18</view>
					<view class="textitem2">周三</view>
				</view>
			</view>
			<!-- 滚动可视区域 -->
		</scroll-view>
	</view>
</template>

style部分

<style>

	/* 滚动可视区域 */
	.scroll {
		border: 1px solid red;

		box-sizing: border-box;
		/* 将边框变为内边框不会溢出到外面去 */

	}

	.group {
		width: 750rpx;
		/* 750rpx在小程序里面是全屏幕 */
		white-space: nowrap;
		/* 元素不换行 */
	}

	.item {
		margin-right: 10rpx;
		text-align: center;
		font-size: 30rpx;
		width: 220rpx;
		height: 220rpx;
		background-color: pink;
		
		display: inline-block;
		/* 改为行级块元素 在父级里面可以显示到一行*/
	}
</style>

效果图：可以横向滑动

其他属性说明查阅官方文档：scroll-view | uni-app官网 (dcloud.net.cn) 

学习视频(转载)：【uniapp内置组件scrollView和swiper组件的使用】https://www.bilibili.com/video/BV1oP4y1Z7yX?vd_source=7eb65dacd72aa848b373e76c5f6c572a