微信小程序(五)基础内容组件

基础内容组件的使用场景

• icon图标组件

(1) icon图标组件:

icon组件:是小程序提供的图标组件。借助icon组件，可以以更低的资源占用展示更加丰富的内容

<icon type="success"></icon>

• icon组件有哪些属性

属性名	类型	默认值	说明
type	String		icon的类型:有效值:success,success_no_circle,info,warn,waiting,cancel,download,search,clear
size	Number	23	icon的大小,单位px
color	Color		icon的颜色,同css的color

 <icon type="success" size="23" color="yellow"></icon>

(2) text文本组件

• text文本组件 :是小程序最基础的组件之一，借助text的组件，我们可以在页面展示文字
• text文本组件:支持\n来换行
• text文本组件的三个参数:

属性名	类型	默认值	说明
selectable	Boolean	false	文本是否可选
space	String	false	显示连续空格
decode	Boolean	false	是否解码

示例:

<text>124</text>

(3) rich-text 富文本组件

• 是小程序提供的富文本组件，能够在小程序中渲染出富文本字符串。

<rich-text nodes="{{html}}" bindtap="tap"></rich-text>

• 解析

Page({
  data: {
    html: '<div class="div_class" style="line-height: 60px; color: red;">Hello&nbsp;World!</div>',
    nodes: [{
      name: 'div',
      attrs: {
        class: 'div_class',
        style: 'line-height: 60px; color: red;'
      },
      children: [{
        type: 'text',
        text: 'Hello&nbsp;World!'
      }]
    }]
  },
  tap() {
    console.log('tap')
  }
})

(4)progress进度条

progress组件:是小程序提供的进度条组件，能够实现小程序动态加载的。

<progress percent="20" show-info>

属性名	类型	默认值	说明	最低版本
percent	Float	无	百分比0~100
show-info	Boolean	false	在进度条右侧显示百分比
stroke-width	Number	6	进度条线的宽度，单位px
color	Color	#09BB07	进度条颜色 （请使用 activeColor）
activeColor	Color		已选择的进度条的颜色
backgroundColor	Color		未选择的进度条的颜色
active	Boolean	false	进度条从左往右的动画
active-mode	String	backwards	backwards: 动画从头播；forwards：动画从上次结束点接着播	1.7.0