17. 基础内容

icon

图标。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)

例子

<icon type="success"/>
<icon type="success_no_circle"/>
<icon type="info"/>
<icon type="warn"/>
<icon type="waiting"/>
<icon type="cancel"/>
<icon type="download"/>
<icon type="search"/>
<icon type="clear"/>
<icon type="success" size="60" color="#000"/>

text

文本

space 有效值：

下面对上面的属性做简单的介绍

selectable

文本是否可选，需要在真机上测试

space

<text>点我          哈哈哈哈哈</text>

如上，虽然代码上写了很多个空格，但是界面只显示一个空格

解决方法是给text一个space属性

<text space="nbsp">点我          哈哈哈哈哈</text>

decode

<text>点我 哈哈哈哈哈</text>

在html，我们可以使用 来代表空格，而在小程序中却行不通。decode就是为了解决这个问题而存在的。

<text decode>点我 哈哈哈哈哈</text>

Tips

1. decode可以解析的有   < > & '    

2. text组件内只支持text嵌套

3. 除了文本节点以外的其他节点都无法长按选中

rich-text

rich-text是富文本标签，可以将字符串解析成对应标签，类似vue中 v-html功能；其利用nodes属性接收输入的html值，nodes可以接收以下两种类型值：标签字符串 和 对象数组。

例子

wxml

<rich-text nodes="{{html1}}"></rich-text>
<rich-text nodes="{{html2}}"></rich-text>

js

Page({
  data: {
    html1:`<h1>这里是h1标签，富文本会将元素当成HTML标签解析后输出--字符串格式</h1>`,
    html2:[
      {
        // 1 div标签 name属性来指定
        name:'h1',
        // 2 标签上有哪些属性
        attrs:{
          // 标签上的属性 class style
          class:'my_h1',
          style:"color:red;"
        },
        // 2 子节点 children 要接收的数据类型和 nodes第二种渲染方式的数据类型一致
        children:[
          {
            name:"p",
            attrs:[],
            // 放文本
            children:[
              {
                type:"text",
                text:"这里是h1标签，富文本会将元素当成HTML标签解析后输出--数组格式"
              }
            ]
          }
        ]  
      }
    ]
  },
})

progress

进度条。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。

例子

<progress percent='20' />
<progress percent='30' show-info='true' />
<progress percent='40' show-info='true' stroke-width='30' />
<progress percent='50' show-info='true' active='true' />
<progress percent='60' show-info='true' active='true' backgroundColor='pink' />
<progress percent='90' show-info='true' active='true' activeColor='pink' />