scroll-view的滚动视图

ᥫᩣꫀꪀꪮ旺ꪝ༠°

已于 2024-08-26 08:37:13 修改

阅读量408

点赞数 18

文章标签： html 前端

于 2024-08-24 11:58:16 首次发布

本文链接：https://blog.csdn.net/2403_86835544/article/details/141497520

版权

1.scroll-y纵向滚动

1.1在scroll-view中添加一个scroll-y实现纵向移动。

<template>
	<scroll-view  scroll-y class="scrollView">
		<view>scrollr子元素</view>
		<view>scrollr子元素</view>
		<view>scrollr子元素</view>
		<view>scrollr子元素</view>
		<view>scrollr子元素</view>
		<view>scrollr子元素</view>
		<view>scrollr子元素</view>
		<view>scrollr子元素</view>
	</scroll-view>
</template>

1.1.2 在style添加样式。

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

1.1.3 运行图。

1.2 在view 添加一个class="box"。

<template>
	<scroll-view  scroll-y class="scrollView">
		<view class="box">scrollr子元素</view>
		<view class="box">scrollr子元素</view>
		<view class="box">scrollr子元素</view>
		<view class="box">scrollr子元素</view>
		<view class="box">scrollr子元素</view>
		<view class="box">scrollr子元素</view>
		<view class="box">scrollr子元素</view>
		<view class="box">scrollr子元素</view>
	</scroll-view>
</template>

1.2.2 为box设置高宽和背景颜色。

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

1.2.3 运行效果。

2.scroll-x横向滚动

2.1 直接把scroll-y改成scroll-x是不会实现横向滚动的，因为<view>默认是纵向排列的，要想实现可以在.box中添加一个display: inline-block行级块元素。

<style lang="scss">
	.scrollView{
		width: 80%;
		height: 200px;
		border: 1px solid red;
		.box{
			width: 100px;
			height: 100px;
			background: green;
			display: inline-block;
		}
	}
</style>

2.2 它还是不会实现，我们发现它在操作到第三个的时候就自动换行了，这时可以在.scrollView中添加white-space: nowrap;在.box添加margin: 5px让它们间隔开来。

2.3 style代码如下。

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