微信小程序_基础内容组件

#基础内容组件#

>icon图标组件

        >微信小程序给我们提供了丰富的图标组件

        >这些图标组件应用于不同的场景

                >成功

                >警告

                >提示

                >取消

                >下载

图标属性

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

         示例代码：

//.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'
        ]
        }        
})

        效果截图： 

>text文本组件

        >text文本组件支持转义符“\”，如换行\n、空格\t

        >组件内只支持嵌套，除了文本节点以外的其 他节点都无法长按选中

        示例代码：

<view>
    <view>
        <text>南枫\t南枫学编程</text>
        <text>\n南枫\n知我意</text>
    </view>
</view>

        效果截图：

  

>progress进度条组件

        >这是一种提高用户体验度的组件

        >可以通过该组件看到完整视频的长度、当前播放的进度 

进度条属性

属性	类型	默认值	说明
percent	number		百分比0~100
show-info	boolean	false	在进度条右侧显示百 分比
stroke-width	number/string	6	进度条线的宽度
color	string	#09BB07	进度条颜色（请使用 activeColor）
active	boolean	false	进度条从左往右的动画

         示例代码：

<progress percent="20" show-info="true"/>
      <text>\n</text>
<progress percent="40" stroke-width="12" />
      <text>\n</text>
<progress percent="60" color="pink"/>
      <text>\n</text>
<progress percent="80" active="true"/>

         效果截图：

>rich-text富文本组件

        >该组件可以在wxml页面文件中显示一些富文本 ，如显示html的元素内容

        >它有一个nodes节点列表属性，nodes属性推荐 使用Array类型

        >nodes支持两种结点，通过type来区分

                >元素节点type=node

                >文本节点type=text

元素节点

属性	类型	默认值	说明
name	标签名	string	支持部分受信任的 HTML 节点
attrs	属性	object	支持部分受信任的属性，遵循 Pascal 命名法
children	子节点列表	array	结构和 nodes 一致

文本节点

属性	类型	默认值	说明
text	文本	string	支持entities

         示例代码：

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

//.js
Page({
    data: {
        nodes: [{
                name: 'div',
                attrs: {
                class: 'div_class',
                style: 'line-height: 60px; color:red;'
                },
                children: [{
                        type: 'text',
                        text: '南枫&nbsp;知我意!'
                        }] 
               }]
         },
    tap() {
        console.log('tap')
        }
})

        效果截图：

---

#学无止境#