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 的时候不限制最大长度