tencent cloud

文档反馈

基础内容

最后更新时间:2024-03-04 22:43:53

    icon

    功能说明:图标组件。
    参数及说明:
    属性
    类型
    默认值
    说明
    type
    string
    -
    icon 的类型,有效值:success,success_no_circle,info,warn,waiting,cancel,download,search,clear
    size
    umber / string
    23
    icon 的大小,单位默认为 px
    color
    string
    -
    icon 的颜色,同 css 的 color
    aria-label
    string
    -
    无障碍访问,(属性)元素的额外描述
    示例代码:
    对应的 WXML 文件
    <view class="group">
    <block wx.for="{{iconSize}}">
    <icon type="success" size="{{item}}" />
    </block>
    </view>
    
    <view class="group">
    <block wx.for="{{iconType}}">
    <icon type="{{item}}" size="40" />
    </block>
    </view>
    
    <view class="group">
    <block wx.for="{{iconColor}}">
    <icon type="success" size="40" color="{{item}}" />
    </block>
    </view>
    对应的 js 文件
    Page({
    data: {
    iconSize: [20, 30, 40, 50, 60, 70],
    iconColor: [
    'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'
    ],
    iconType: [
    'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear'
    ]
    }
    })
    
    
    

    progress

    功能说明:进度条。
    参数及说明:
    属性
    类型
    默认值
    说明
    percent
    float
    百分比0~100
    show-info
    boolean
    false
    在进度条右侧显示百分比
    border-radius
    number / string
    0
    圆角大小,单位:px
    font-size
    number / string
    16
    右侧百分比字体大小,单位:px
    stroke-width
    number / string
    6
    进度条线的宽度
    color
    color
    #09BB07
    进度条颜色(请使用 activeColor)
    activeColor
    color
    -
    已选择的进度条的颜色
    backgroundColor
    color
    -
    未选择的进度条的颜色
    active
    boolean
    false
    进度条从左往右的动画
    active-mode
    string
    backwards
    backwards: 动画从头播
    forwards:动画从上次结束点接着播
    bindactiveend
    eventhandle
    -
    动画完成事件
    aria-label
    string
    -
    无障碍访问,(属性)元素的额外描述
    示例代码:
    <progress percent="20" show-info />
    <progress percent="40" stroke-width="12" />
    <progress percent="60" color="blue" />
    <progress percent="80" active />
    
    
    

    text

    功能说明:文本。
    参数及说明:
    属性
    类型
    默认值
    说明
    selectable
    boolean
    false
    文本是否可选
    space
    string
    -
    显示连续空格
    decode
    boolean
    false
    是否解码
    说明
    ensp
    中文字符空格一半大小
    emsp
    中文字符空格大小
    nbsp
    根据字体设置的空格大小
    说明:
    decode可以解析的有 &nbsp;  &lt;  &gt;  &amp;  &apos;  &ensp;  &emsp
    各个操作系统的空格标准并不一致。
    <text>组件内只支持 <text>嵌套。
    除了文本节点以外的其他节点都无法长按选中。
    对应的 WXML 文件
    <view class="btn-area">
    <view class="body-view">
    <text>{{text}}</text>
    <button bindtap="add">add line</button>
    <button bindtap="remove">remove line</button>
    </view>
    </view>
    对应的 js 文件
    const initData = 'this is first line\\nthis is second line'
    const extraLine = []
    Page({
    data: {
    text: initData
    },
    add(e) {
    extraLine.push('other line')
    this.setData({
    text: initData + '\\n' + extraLine.join('\\n')
    })
    },
    remove(e) {
    if (extraLine.length > 0) {
    extraLine.pop()
    this.setData({
    text: initData + '\\n' + extraLine.join('\\n')
    })
    }
    }
    })
    
    
    

    rich-text

    功能说明:富文本。
    参数及说明:
    属性
    类型
    默认值
    说明
    nodes
    array / string
    -
    节点列表 / HTML String
    space
    string
    -
    显示连续空格
    space有效值:
    说明
    ensp
    中文字符空格一半大小
    emsp
    中文字符空格大小
    nbsp
    根据字体设置空格大小
    支持默认事件,包括:taptouchstarttouchmovetouchcanceltouchendlongtap
    nodes
    nodes 属性推荐使用 Array 类型,由于组件会将 String 类型转换为 Array 类型,因而性能会有所下降。现支持两种节点,通过 type 来区分,分别是元素节点和文本节点,默认是元素节点,在富文本区域里显示的 HTML 节点。
    元素节点:type = node
    属性
    说明
    类型
    必填
    备注
    name
    标签名
    string
    支持部分受信任的 HTML 节点
    attrs
    属性
    object
    支持部分收信人的属性,遵循 Pascal 命名法
    children
    子节点列表
    array
    结构和 nodes 一致
    文本节点:type=text
    属性
    说明
    类型
    必填
    备注
    text
    文本
    string
    支持 entities
    受信任的 HTML 节点及属性
    全局支持 class 和 style 属性,不支持 id 属性。
    节点
    属性
    节点
    属性
    a
    -
    img
    alt,src,height,width
    abbr
    -
    ins
    -
    b
    -
    label
    -
    br
    -
    legend
    -
    code
    -
    li
    -
    col
    span,width
    ol
    start,type
    colgroup
    span,width
    p
    -
    dd
    -
    q
    -
    del
    -
    span
    -
    div
    -
    strong
    -
    dl
    -
    sub
    -
    dt
    -
    sup
    -
    em
    -
    table
    width
    fieldset
    -
    tbody
    -
    h1
    -
    td
    colspan,height,rowspan,width
    h2
    -
    tfoot
    -
    h3
    -
    th
    colspan,height,rowspan,width
    h4
    -
    thead
    -
    h5
    -
    tr
    -
    h6
    -
    ul
    -
    hr
    -
    -
    -
    示例代码
    <!-- rich-text.wxml -->
    <rich-text nodes="{{nodes}}" bindtap="tap"></rich-text>
    // rich-text.js
    Page({
    data: {
    nodes: [{
    name: 'div',
    attrs: {
    class: 'div_class',
    style: 'line-height: 60px; color: red;'
    },
    children: [{
    type: 'text',
    text: 'Hello&nbsp;World!'
    }]
    }]
    },
    tap() {
    console.log('tap')
    }
    })
    说明:
    nodes 不推荐使用 String 类型,性能会有所下降。
     rich-text 组件内屏蔽所有节点的事件。
    attrs 属性不支持 id ,支持 class。
    name 属性大小写不敏感。
    如果使用了不受信任的 HTML 节点,该节点及其所有子节点将会被移除。
    img 标签仅支持网络图片。
    如果在自定义组件中使用 rich-text 组件,那么仅自定义组件的 wxss 样式对 rich-text 中的 class 生效。nodes不推荐使用 String 类型,性能会有所下降。
    
    联系我们

    联系我们,为您的业务提供专属服务。

    技术支持

    如果你想寻求进一步的帮助,通过工单与我们进行联络。我们提供7x24的工单服务。

    7x24 电话支持