元素,用于组织和布局页面的结构。
View
可以包含文本、图像、其他 Taro 组件等,帮助你构建小程序页面的层次结构。
基本用法示例:
import Taro from '@tarojs/taro';
import { View, Text, Image } from '@tarojs/components';
function MyComponent() {
return (
Hello, Taro!
);
}
export default MyComponent;
上述例子中,View
组件包含了一个文本组件 Text
和一个图片组件 Image
,它们都被嵌套在 View
内部。className=“container”引用了名为container的组件样式。
View使用的属性,一般情况下就是上文中通用属性和通用事件会用的比较多。
参数
类型
默认值
说明
hoverClass
string
none
指定按下去的样式类。当 hover-class="none"
时,没有点击态效果
hoverStartTime
number
50
按住后多久出现点击态,单位毫秒
hoverStayTime
number
400
手指松开后点击态保留时间,单位毫秒
Text
Text
组件用于显示文本内容。类似于 HTML 中的文本节点,Text
组件可以包含纯文本或内联样式。
以下是一个简单的例子:
import Taro from '@tarojs/taro';
import { View, Text } from '@tarojs/components';
function MyComponent() {
return (
Hello, Taro!
);
}
export default MyComponent;
在这个例子中,Text
组件包含了文本内容 "Hello, Taro!"。
Text
的属性和用法:
注意事项:
RichText
RichText 组件用于显示富文本内容,支持 HTML 标签和样式。它允许你在小程序中渲染包含格式、链接和其他 HTML 元素的文本。
import { View, RichText } from '@tarojs/components';
function MyComponent() {
const richTextContent = 'Hello, Taro !
';
return (
);
}
export default MyComponent;
// 或者下述
class App extends Components {
state = {
nodes: [{
name: 'div',
attrs: {
class: 'div_class',
style: 'line-height: 60px; color: red;'
},
children: [{
type: 'text',
text: 'Hello World!'
}]
}]
}
render () {
return (
)
}
}
在这个例子中,`RichText` 组件通过 `nodes` 属性接受包含 HTML 标签的文本内容,并将其渲染为富文本。
RichText常用属性:
注意事项:
- `RichText` 组件主要用于渲染富文本内容,支持一部分 HTML 标签和样式,但不支持所有 HTML 特性。并且在小程序中的支持程度有限,某些特殊标签和样式可能不会得到正确渲染。在使用时请注意测试和验证。
Image
Image
组件用于显示图片。该组件对应小程序平台的
组件,并在不同平台上进行适配转换。
以下是一个简单的使用示例:
import Taro from '@tarojs/taro';
import { View, Image } from '@tarojs/components';
function MyComponent() {
return (
);
}
export default MyComponent;
在这个例子中,Image
组件用于显示路径为 "/path/to/image.jpg"
的图片。
常见的 Image
组件属性:
src
: 图片资源地址,可以是本地路径或远程 URL。
mode
: 图片裁剪、缩放的模式,可选值为
参数
说明
scaleToFill
缩放模式,不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素
aspectFit
缩放模式,保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。
aspectFill
缩放模式,保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。
widthFix
缩放模式,宽度不变,高度自动变化,保持原图宽高比不变
heightFix
缩放模式,高度不变,宽度自动变化,保持原图宽高比不变
top
裁剪模式,不缩放图片,只显示图片的顶部区域
bottom
裁剪模式,不缩放图片,只显示图片的底部区域
center
裁剪模式,不缩放图片,只显示图片的中间区域
left
裁剪模式,不缩放图片,只显示图片的左边区域
right
裁剪模式,不缩放图片,只显示图片的右边区域
top left
裁剪模式,不缩放图片,只显示图片的左上边区域
top right
裁剪模式,不缩放图片,只显示图片的右上边区域
bottom left
裁剪模式,不缩放图片,只显示图片的左下边区域
bottom right
裁剪模式,不缩放图片,只显示图片的右下边区域
lazy-load
: 是否懒加载,默认值为 false
。。只针对 page 与 scroll-view 下的 image 有效。
show-menu-by-longpress
: 是否开启长按图片显示识别小程序码菜单,默认值为 false
。
onLoad
、onError
等事件: 提供图片加载成功、失败等事件的回调函数。
Button
Button
组件用于创建按钮。该组件对应小程序平台的
组件,同时也会根据目标平台进行相应的转换。
以下是一个简单的使用示例:
import Taro from '@tarojs/taro';
import { View, Button } from '@tarojs/components';
function MyComponent() {
const handleClick = () => {
console.log('Button Clicked');
};
return (
Click Me
);
}
export default MyComponent;
在这个例子中,Button
组件被嵌套在 View
组件内,通过 onClick
属性设置了按钮点击事件的处理函数。
常见的 Button
组件属性: