uniapp的组件

text组件

1.属性 selectable让文字可选。默认文字是不可选中的。

2.text组件的文字是在一行上的。需要在外边加上一个view让它在不同的行上。

<template>
 	<view>
 	      <view>
          		<text>这是第一行</text>
		</view>
		<view>
          	<text>这是第二行</text>
		</view>
  </view>
</template>

这里是外边嵌套了一个view是因为。必须要有一个view的根组件。

3.space属性，设置空格大小。

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

		<view>
          	<text space="ensp">这是     第二行</text>
		</view>
		<view>
          	<text space="emsp">这是    第二行</text>
		</view>
		<view>
          	<text space="nbsp" style="font-size:100px">这是    第二行</text>
		</view>

view组件

1.hover-class属性。

设置点击之后的样式。

<template>
	<view class="box" hover-class="box-active">	这是一个盒子	</view>
</template>

<style>
	.box{
		width: 100px;
		height: 100px;
		font-size: 10px;
		background-color: #555555;
	}
	.box-active{
		background-color: #DD524D;
	}
</style>

2.hover-stop-propagation属性。

当两个盒子嵌套，点击小盒子时，阻止大盒子冒泡。
具体是在小盒子里添加hover-stop-propagation。

<template>
	<view class="box2" hover-class="box2-active">
		<view class="box" hover-class="box-active" hover-stop-propagation="true">	
		   这是一个盒子	
		</view>
	</view>	
</template>

3.hover-start-time和hover-stay-time属性。

hover-start-time按住后多久出现点击态。hover-stay-time是点击态结束之后保持多久。
注意这里hover-start-time的值要是数字，我们平时里边是字符串的。所以我们要在这个属性前面加上冒号把这个引号里的字符串转为表达式。

<view class="box" hover-class="box-active" hover-stop-propagation="true"    :hover-start-time="2000"  :hover-stay-time="2000" >	
		   这是一个盒子	
</view>

button组件

button组件的属性值一般为布尔值，所以就直接写属性就可以了。

image组件

image组件的src属性可以设置图片源。但是加载出来的图片会有比例缩放的问题，这是因为不同的平台对于image会有一个默认的大小框，所以就可以通过设置mode属性来设置图片的格式。
mode=“aspectFit” 能让图片完整的显示
mode=“aspectFill” 图片显示会有截取