uni-app中的组件(四)

1.text文本组件的用法

属性	类型	默认值	必填	说明
selectable	boolean	false	否	文本是否可选
space	String	.	否	显示连续空格，可选参数，ensp,emsp,nbsp
decode	boolean	false	否	是否解码

• text组件相当于行内标签、在同一行显示
• 除了文本节点以外的其他节点都无法长按选中

---

space值说明

值	说明
ensp	中文字符空格一半大小
emsp	中文字符空格大小
nbsp	根据字体设置的空格大小

代码案例

	<view>
		<view>
			<text>唱歌跳舞打篮球</text>
		</view>
		<view>
			<text selectable>唱歌跳舞打篮球</text>
		</view>
		<view>
			<text selectable space="ensp">唱歌     跳舞打篮球</text>
		</view>
		<view>
			<text selectable space="emsp">唱歌     跳舞打篮球</text>
		</view>
		<view>
			<text selectable space="nbsp" style="font-size: 30px;;">唱歌     跳舞打篮球</text>
		</view>
		<view>&amp;</view>
	</view>

2.view视图容器组件的用法

view视图容器，类似于HTML中的div

组件的属性

属性	类型	默认值	必填	说明
hover-class	string	none	否	指定按下去的样式类。当hover-class-none时，没有点击态效果
hover-stop-propagation	boolean	false	否	指定是否阻止本节点出现点击态
hover-start-time	number	50	否	按住后多久出现点击态，单位毫秒
hover-stay-time	number	400	否	手指松开后点击态保留时间，单位毫秒

代码案例：

	<view>
		<view class="box2" hover-class="box-active2">
			<view class="box" hover-class="box-active" :hover-start-time="2000" :hover-stay-time="2000" hover-stop-propagation>我是一个大盒子</view>
		</view>
	</view>
</template>

<script>
</script>

<style>
	.box {
		width: 100px;
		height: 100px;
		background: #007AFF;
	}
	.box2{
		width: 200px;
		height: 200px;
		background: #4CD964;
	}
	.box-active {
		background: red;
	}
	.box-active2{
		background: #F0AD4E;
	}
</style>

3.button组件

按钮
属性说明

属性名	类型	默认值	说明
size	String	default	按钮的大小
type	String	default	按钮的样式类型
plain	Boolean	false	按钮是否镂空，背景色透明
disabled	Boolean	false	是否禁用
loading	Boolean	false	名称前是否带loading图标
form-type	String		用于form组件，点击分别会触发submit/reset事件

size有效值

值	说明
default	默认大小
mini	小尺寸

type有效值

值	说明
primary	微信小程序为绿色，APP，H5,百度小程序，支付宝小程序为蓝色，头条小程序为红色，QQ小程序为浅蓝色
default	白色
wam	红色

代码案例：

			<button>按钮</button>
			<button size="mini">按钮</button>
			<button type="primary">按钮</button>
			<button plain>按钮</button>
			<button disabled="">按钮</button>
			<button loading="">按钮</button>

效果图

form-type有效值

值	说明
submit	提交表单
reset	重置表单

4.image组件

图片

属性名	类型	默认值	说明
src	String		图片资源地址
mode	String	‘scaleToFile’	图片裁剪，缩放的模式
lazy-load	Boolean	false	图片懒加载。只针对page与scrool-view下的image有效
fade-show	Boolean	true	图片显示动画效果

mode有效值
mode有13种模式，其中4种是缩放模式，9种是裁剪模式。

模式	值	说明
缩放	aspectFit	保持纵横比缩放图片，使用图片的长边完全显示出来。也就是说，可以完整地将图片显示出来。
缩放	aspectFill	保存纵横比缩放图片，只保证图片的短边能完全显示出来。图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。

Tips

• image组件默认宽度300px，高度225px；app-nvue平台暂时默认认为屏幕宽度
• src仅支持相对路径，绝对路径，支持base64码；
• 页面结构复杂，css样式太多的情况，使用image可能导致样式生效较慢，出现"闪的一下"的情况，此时设置image{will-change:transfrom},可优化此问题。
  代码案例：

			<image src="../../static/logo.png"></image>
			<image src="../../static/logo.png" mode="aspectFill"></image>
			<image src="../../static/logo.png" mode="aspectFit"></image>