uni-app基础知识【rich-text、progress】

一.rich-text富文本【很少使用】

注意：

• app-nvue 平台 nodes 属性只支持使用 Array 类型。
• 支付宝小程序 nodes 属性只支持使用 Array 类型。

如果需要支持 HTML String，则需要自己将 HTML String转化为 nodes 数组，可使用 html-parser 转换。支持默认事件，包括：click、touchstart、touchmove、touchcancel、touchend、longpress。

nodes 属性推荐使用 Array 类型，由于组件会将 String 类型转换为 Array 类型，因而性能会有所下降。

nodes现支持两种节点，通过 type 来区分，分别是元素节点和文本节点，默认是元素节点，在富文本区域里显示的 HTML 节点。

元素节点：type = node

文本节点：type = text

受信任的HTML节点及属性，全局支持class和style属性，不支持id属性。

二.rich-text案例

<view class="lab">富文本</view>
<view class="uni-common-mt" style="background:#ccc; color: #456; text-align: center; padding:20rpx;">
	<rich-text>{{fwb}}</rich-text>
</view>

效果：

三.progress进度条

属性说明

四.progress案例

<view class="lab">进度条</view>
<view class="progress">
	<progress percent="20" active show-info stroke-width="3" />
	<progress percent="40" active stroke-width="3" color="#00f"/>
	<progress percent="60" active stroke-width="3" backgroundColor="#999"/>
	<progress percent="80" activeColor="red" active show-info stroke-width="5" />
</view>

效果：