HBuilder中常用组件及用法

1.view基本视图容器

它类似于传统html中的div，用于包裹各种元素内容。

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

属性名	类型	默认值	说明
hover-class	String	none	指定按下去的样式类。
hover-stop-propagation	Boolean	false	点击子组件是否阻止父组件出现点击样式
hover-start-time	Number	50	按住后多久出现点击样式
hover-stay-time	Number	400	手指松开后点击样式保留的时间

用法

2.scroll-view可滚动视图容器

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

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

属性名	类型	默认值	说明
scroll-x	Boolean	false	允许横向滚动
scroll-y	Boolean	false	允许纵向滚动

3.image图片组件

image支持的格式有bmp,gif,ico,jpg,png,webp,heic。可以通过插件来扩展app平台nvue/uvue的图片支持。小程序上只支持网络地址的svg图;

<image>组件未设置宽高时，默认宽度320px、高度240px。app-nvue平台，暂时默认为屏幕宽度、高度 240px，src 仅支持相对路径、绝对路径。

自定义组件里面使用 <image>时,若src使用相对路径可能出现路径查找失败的情况，故建议使用绝对路径。

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

模式	值	说明
缩放	scaleToFill	不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
缩放	aspectFit	保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
缩放	aspectFill	保持纵横比缩放图片，只保证图片的短边能完全显示出来。
缩放	widthFix	宽度不变，高度自动变化，保持原图宽高比不变
缩放	heightFix	高度不变，宽度自动变化，保持原图宽高比不变

4.swiper滑块视图容器

注意滑动切换和滚动的区别，滑动切换是一屏一屏的切换。swiper下的每个swiper-item是一个滑动切换区域，不能停留在2个滑动区域之间。

属性名	类型	默认值	说明
indicator-dots	Boolean	false	是否显示面板指示点
indicator-color	Color	rgba(0, 0, 0, 3)	指示点颜色
indicator-active-color	Color	#000000	当前选中的指示点颜色
autoplay	Boolean	false	是否自动切换
interval	Number	5000	自动切换时间间隔
duration	Number	500	滑动动画时长
circular	Boolean	false	播放到末尾后重新回到开头
vertical	Boolean	false	滑动方向是否为纵向

5.text文本组件用于包裹文本内容 

在app-uvue和app-nvue中，文本只能写在text中，而不能写在view的text区域。

属性名	类型	默认值	说明
selectable	Boolean	false	文本是否可选
user-select	Boolean	false	文本是否可选(微信小程序)
space	String		显示连续空格(钉钉不支持)

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

6.navigator页面跳转

属性名	类型	默认值	说明
url	String		应用内的跳转链接，值为相对路径或绝对路径
open-type	String	navigate	跳转方式

open-type值	说明
navigate	保留当前页面，跳转到应用内的某个页面
redirect	关闭当前页面，跳转到应用内的某个页面

7.button按钮组件

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

8.input输入框

属性名	类型	默认值	说明
value	String		输入框的初始内容
type	String	text	input 的类型有效值(手机上键盘的值)
password	Boolean	false	是否是密码类型（不能输入中文）
maxlength	Number	140	最大输入长度，设置为 -1 的时候不限制最大长度