scroll-view 可滚动视图区域组件

当一个盒子里的内容过多，无法全部显示时，使用scroll-view，可以实现区域滑动，手动滑动展示盒子内未显示全的内容。

scroll-view的属性过多，这里只介绍最基本的2个：横向滑动与纵向滑动。

先创建scoll-view视图区域，代码如下：

<template>
		<view class="box" hover-class="boxHover"> 
			<scroll-view scroll-y="true" class = "scrollview">	
			
			</scroll-view>
		</view>
</template>

<script setup>
	
</script>

<style lang="scss">
	.scrollview{	
		width: 80%;
		height:220px;
		border: 1px solid red ;
	}
</style>

实际效果如下：

现在开始先演示纵向滑动(scroll-y)，往scoll-view内写入大量的文字，代码如下：

<template>
		<view class="box" hover-class="boxHover"> 
			<scroll-view scroll-y="true" class = "scrollview">
				<view>纵向滑动</view>
				<view>纵向滑动</view>
				<view>纵向滑动</view>
				<view>纵向滑动</view>
				<view>纵向滑动</view>
				<view>纵向滑动</view>
				<view>纵向滑动</view>
				<view>纵向滑动</view>
				<view>纵向滑动</view>
				<view>纵向滑动</view>
				<view>纵向滑动</view>
				<view>纵向滑动</view>
				<view>纵向滑动</view>
				<view>纵向滑动</view>
			</scroll-view>
		</view>
</template>

<script setup>
	
</script>

<style lang="scss">
	.scrollview{	
		width: 80%;
		height:220px;
		border: 1px solid red ;
	}
</style>

纵向滑动条出现，效果如下：

接下来设置横向滑动(scroll - x)

首先，为这些View设置样式，让它们显示为一个个的小盒子。

<template>
		
			<scroll-view scroll-y class = "scrollview">
				<view class = "box">横向滑动</view>
				<view class = "box">横向滑动</view>
				<view class = "box">横向滑动</view>
				<view class = "box">横向滑动</view>
				<view class = "box">横向滑动</view>
				<view class = "box">纵向滑动</view>
				<view class = "box">横向滑动</view>
				<view class = "box">横向滑动</view>
				<view class = "box">横向滑动</view>
				<view class = "box">横向滑动</view>
				<view class = "box">横向滑动</view>
				<view class = "box">横向滑动</view>
				<view class = "box">横向滑动</view>								
			</scroll-view>

</template>

<script setup>
	
</script>

<style lang="scss">
	.scrollview{	
		width: 80%;
		height:220px;
		border: 1px solid red ;
	}
		
	.box{
		width:100px ;
		height:100px ;
		background: pink;
	}
</style>

设置完，效果如下：

默认是纵向排列的，想要实现横向滑动，需要做一些设置。

1. 设置属性为横向滑动(scroll - x) ；
2. 将子元素box变为横级块元素：display: inline-block;
3. 设置父元素scrollview不换行：white-space:nowrap ;

代码如下：

<template>
		
			<scroll-view scroll-x class = "scrollview">
				<view class = "box">横向滑动</view>
				<view class = "box">横向滑动</view>
				<view class = "box">横向滑动</view>
				<view class = "box">横向滑动</view>
				<view class = "box">横向滑动</view>
				<view class = "box">纵向滑动</view>
				<view class = "box">横向滑动</view>
				<view class = "box">横向滑动</view>
				<view class = "box">横向滑动</view>
				<view class = "box">横向滑动</view>
				<view class = "box">横向滑动</view>
				<view class = "box">横向滑动</view>
				<view class = "box">横向滑动</view>								
			</scroll-view>

</template>

<script setup>
	
</script>

<style lang="scss">
	.scrollview{	
		width: 80%;
		height:220px;
		border: 1px solid red ;
		white-space:nowrap ;
	}
		
	.box{
		width:100px ;
		height:100px ;
		background: pink;
		display: inline-block;
		margin: 5px;
	}
</style>

效果如下：