uni-app基础知识【rich-text、progress】
一.rich-text富文本【很少使用】注意:app-nvue 平台 nodes 属性只支持使用 Array 类型。支付宝小程序 nodes 属性只支持使用 Array 类型。如果需要支持 HTML String,则需要自己将 HTML String转化为 nodes 数组,可使用 html-parser 转换。支持默认事件,包括:click、touchstart、touchmove、touchc
·
一.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>
效果:
更多推荐
所有评论(0)