uniapp初级入门-scrollview组件如何使用

最新推荐文章于 2026-03-26 09:48:56 发布

原创最新推荐文章于 2026-03-26 09:48:56 发布 · 637 阅读

11 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

uniapp

本文详细介绍了如何在HBuilderX中创建项目并实现水平和垂直滚动功能，通过`scroll-view`组件展示四个带有不同背景色的子项，涉及CSS样式设置。

使用Hbuiderx创建项目，然后新建页面，下面贴出代码。

水平滚动

<template>
	<view>
		<view>水平滚动</view>
		<scroll-view class="scorll" :scroll-x="true" :scroll-with-animation="true">
			<view class="item one">001</view>
			<view class="item two">002</view>
			<view class="item three">003</view>
			<view class="item four">004</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">

	.scorll{
		height: 200rpx;
		//需要设置父元素不换行
		white-space: nowrap;
		.item {
			width: 100%;
			height: 200rpx;
			//需要设置子元素为行元素
			display: inline-block;
		}
		
		.one{
			background-color: red;
		}
		
		.two
		{
			background-color: yellow;
		}
		
		.three{
			background-color: green;
		}
		
		.four{
			background-color: blue;
		}
	}
</style>

垂直滚动

<template>
	<view>
		<view>垂直滚动</view>
		<scroll-view class="scorll" :scroll-y="true" :scroll-with-animation="true">
			<view class="item one">001</view>
			<view class="item two">002</view>
			<view class="item three">003</view>
			<view class="item four">004</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">

	.scorll{
		//垂直滚动，需要设置父级高度
		height: 400rpx;

		.item {
			width: 100%;
			height: 400rpx;
		}
		
		.one{
			background-color: red;
		}
		
		.two
		{
			background-color: yellow;
		}
		
		.three{
			background-color: green;
		}
		
		.four{
			background-color: blue;
		}
	}
</style>