uni-app常用组件介绍

1.view

view类似于传统HTML的div，用于包裹各种元素

如果使用nvue，则需注意，包裹文字应该使用<text>组件。

属性说明：

hover-class:默认值是none,按下去时的样式类，当 hover-class="none" 时，没有点击态效果

代码示例： 

<template>
	<view class="box" hover-class="HoverBox">1111</view>
</template>

<script>
	
</script>

<style>
	.box{
		width: 100px;
		height: 50px;
		background: green;
	}
	.HoverBox{
		background: red;
	}
	
</style>

hover-stop-propagation：默认值是false,用来阻止祖先节点出现点击时的样式

hover-start-time：点击后多少毫秒显示样式类

hover-stay-time：鼠标松开后多少毫秒消失样式

代码示例：

<template>
	<view class="box" hover-class="HoverBox" hover-stop-propagation hover-start-time="1000" hover-stay-time="2000">2222</view>
</template>

<script>
	
</script>

<style>
	.box{
		
		width: 100px;
		height: 50px;
		background: green;
	}
	.HoverBox{
		background: red;
	}
	
</style>

2.scroll-view：

可滚动视图区域。用于区域滚动。

注意：在webview渲染的页面中，区域滚动的性能不及页面滚动。

属性：

scroll-x：也许横向滚动

scroll-y：允许纵向滚动

scroll-top：设置纵向滚动条位置

scroll-left：设置横向滚动条位置

代码示例：

<template>
	<!-- 纵向滚动条 -->
	<scroll-view class="View_y"  scroll-y>
		<view class="box_y">詹家伟1111</view>
		<view class="box_y">詹家伟2222</view>
		<view class="box_y">詹家伟3333</view>
		<view class="box_y">詹家伟4444</view>
		<view class="box_y">詹家伟5555</view>
	</scroll-view>
	
	<view>-------------------分割线----------------------------
	------------------------------------------------------</view>
	<!-- 横向滚动条 -->
	<scroll-view class="View_x"  scroll-x>
		<view class="box_x">詹家伟1111</view>
		<view class="box_x">詹家伟2222</view>
		<view class="box_x">詹家伟3333</view>
		<view class="box_x">詹家伟4444</view>
		<view class="box_x">詹家伟5555</view>
	</scroll-view>
</template>

<script>
	
</script>

<style>
.View_y{
	font-size: 50px;
	margin: auto;
	width: 300px;
	height: 200px;
	border:  1px solid red;
}

.View_x{
	font-size: 50px;
	margin: auto;
	width: 300px;
	height: 100px;
	border:  1px solid red;
	white-space: nowrap; /* 不自动换行 */
}
.box_x{
	width: 300px;
	display: inline-block; /* 把子元素设置成行内块级元素 */
}
</style>

使用竖向滚动时，需要给 <scroll-view> 一个固定高度。

使用横向滚动时，需要给<scroll-view>添加white-space: nowrap样式，display: inline-block把子元素设置成行内块级元素。