组件的基本使用

组件的基本使用

  主要就讲解text文本组件，view视图容器组件，button按钮组件，image组件

1.text文本组件

1.1 text 组件的属性

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

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

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

1.2 text 组件代码示例

	<view>
		<!-- text 组件相当于行内标签，在一行内显示 -->
		<view>
			<text>
				你好，uni-app
			</text>
		</view>
		<!-- 在h5浏览器测试，没有选中效果 -->
		<view selectable>
			<text>
				你好，uni-app
			</text>
		</view>
		<view>
			<text>
				 来了老弟
			</text>
		</view>
		<view>
			<text space='emsp'>
				 来了  老弟
			</text>
		</view>
		<view>
			<text space='ensp'>
				 来了  老弟
			</text>
		</view>
		<view>
			<text space='nbsp'>
				 来了  老弟
			</text>
		</view>
		<view>
			<text space='decode'>
				 来了&emsp;&ensp;&ensp;老弟
			</text>
		</view>
	</view>

  效果如下：

2.view视图容器组件

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

2.1 view组件的属性

2.2 代码示例

	<view>
		<view class="box" hover-class="box-hover">
			 <view class="box-sub" hover-class="box-sub-hover" hover-stop-propagation :hover-start-time="2000" :hover-stay-time="2000">
			
			  </view>
		</view>
	</view>

  效果如下：

3.button按钮组件

  button 组件默认独占一行，设置 size 为 mini 时可以在一行显示多个

3.1 组件的属性

属性名	类型	默认值	说明
size	String	default	按钮的大小
type	String	default	按钮的样式类型
plain	Boolean	false	按钮是否镂空，背景色透明
disabled	Boolean	false	是否按钮
loading	Boolean	false	名称是否带 loading t图标

  size 有效值

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

  type 有效值

值	说明
primary	微信小程序、360小程序为绿色，App、H5、百度小程序、支付宝小程序、快应用为蓝色，字节跳动小程序为红色，QQ小程序为浅蓝色。如想在多端统一颜色，请改用default，然后自行写样式
default	白色
warn	红色

3.2 代码示例

	<view>
		<view>
			<button size='mini' type='primary'>前端</button>
			
			<button size='mini' type='default' disabled='true'>前端</button>
			
			<button size='mini' type='warn' loading='true'>前端</button>
		</view>
		<view>
			<button size='default' type='primary'>后端</button>
			
			<button size='default' type='primary' plain>后端</button>
			
			<button size='default' type='default' disabled='true'>后端</button>
			
			<button size='default' type='warn' loading='true'>后端</button>
		</view>
	</view>

  效果如下：

4.image图片组件

  - <image> 组件默认宽度 300px、高度 225px；
  - src 仅支持相对路径、绝对路径，支持 base64 码；
  - 页面结构复杂，css样式太多的情况，使用 image 可能导致样式生效较慢，出现 “闪一下” 的情况，此时设置 image{will-change: transform} ,可优化此问题。

4.1 image属性

属性名	类型	默认值	说明	平台差异说明
src	String		图片资源地址
mode	String	‘scaleToFill’	图片裁剪、缩放的模式

  mode 5 种是缩放模式：

模式	值	说明
缩放	scaleToFill	不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
缩放	aspectFit	保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
缩放	aspectFill	保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
缩放	widthFix	宽度不变，高度自动变化，保持原图宽高比不变。
缩放	heightFix	高度不变，宽度自动变化，保持原图宽高比不变。

4.2 代码示例

	<view>
		<image src="../../static/1.png" mode="">
		</image>

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

		<image src="../../static/1.png" mode="aspectFill">
			
		</image>
		<image src="../../static/1.png" mode="widthFix">
			
		</image>

		<image src="../../static/1.png" mode="heightFix">
			
		</image>
		
	</view>

  1. scaleToFill ：mode默认值是scaleToFill 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
  2. aspectFit ： 保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
    解析：
    图片的长边能完全显示出来的意思：等比例缩放，让图片在image元素(300 * 240)里，最大的完整展示出来
    图片的尺寸是555 545，肯定不能是先图片的宽度放大到image元素的宽度 ， 如果图片先放大到300 ，按照图片的比例尺寸 ，图片的宽度就要放大到294多，会超过image元素的高度导致显示不全 ，不满足完整地将图片显示出来的要求。 所以应该是图片的宽度先放到image元素的高度240 ，按照图片的比例尺寸 ，图片的宽度就要放大到244多小于image元素的宽度320 ，满足完整地将图片显示出来的要求 。只不过会导致image元素宽度填充不够。
  3. aspectFill ： 保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
    解析:
    只保证图片的短边能完全显示出来 图片保持原比例最小超出(超出就不在放大了)或等于(除非图片的比列等于300:240)image元素(300 * 240)
    图片的555 * 545 ，肯定不能是先图片的高度放大到image元素的高度 ， 如果图片先放大到240 按照图片的比例尺寸 ，图片的宽度就要放大到244多 小于image元素的宽度320 ，不满足 图片最小超出image元素的要求。 所以应该是图片的宽度先放到image元素的宽度300， 按照图片的比例尺寸 ，图片的高度就要放大到294多大于image元素的高度3240， 满足图片最小超出image元素的要求 。但是导致图片通常只在水平是完整的，垂直方向将会发生截取。
  4. widthFix： 宽度不变，高度自动变化，保持原图宽高比不变
    解析：会发现图片高度撑开盒子的240了变成294多
  5. heightFix： 高度不变，宽度自动变化，保持原图宽高比不变
    解析：会发现图片宽度小于盒子和宽度300变成244多

  效果如下：