小程序开发之组件基本内容icon、text

icon

图标。

例如：
效果展示

代码：
index.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>

index.js

Page({
  data: {
    iconSize: [20, 30, 40, 50, 60, 70],  
    iconType: [
      'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear'
    ],
    iconColor: [
      'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'
    ]
  }
})

text

文本。

space 有效值：

Tips

• decode可以解析的有   < > & '    
• 各个操作系统的空格标准并不一致。
• 组件内只支持 嵌套。
• 除了文本节点以外的其他节点都无法长按选中。

例如：小程序开发如何在文本中插入连续空格

代码：

index.wxml
 <text space="emsp" decode="{{true}}">文&emsp;-&emsp;&emsp;本</text>