百度智能小程序组件 基础内容

icon

---

解释：图标

属性说明:

属性名	类型	默认值	说明
type	String		生效的值：success, info, warn, waiting, success_no_circle, clear, search, personal, setting, top, close, cancel, download, checkboxSelected, radioSelected, radioUnselect
size	Number	23	icon 的大小，单位是 px
color			icon 的颜色，同 css 的 color

示例：

<view class="group">
    <view>
        <icon s-for="type in types.smallDefault" type="{{type}}" class="small-default" />
    </view>
</view>

<view class="group choose">
    <icon s-for="size in sizes" type="success" size="{{size}}" class="icon-size" />
</view>

<view class="group choose">
    <icon s-for="color in colors" type="success" size="40" color="{{color}}" class="icon-color" />
</view>

Page({
    data: {
        types: {
           smallDefault: ['success', 'info', 'warn', 'waiting',
           'success_no_circle', 'clear', 'search', 'personal',
           'setting', 'top', 'close', 'cancel', 'download',
           'checkboxSelected', 'radioSelected', 'radioUnselect']
        },
        colors: [
            '#333', '#666', '#999', '#3C76FF', '#F7534F'
        ],
        sizes: [
            40, 35, 30, 25
        ]
    }
});

text

---

解释：放文本的元素

属性说明:

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

space 有效值:
属性说明:

值	说明
ensp	中文字符空格一半大小
emsp	中文字符空格大小
nbsp	根据字体设置的空格大小

注意：

  组件内只支持 嵌套。 示例：

<view class="wrap">
    <view class="group">
        <view s-for="text in texts" class="text-box wrap-{{text}}">
            <view class="text-px text-{{text}}">{{text}}</view>
            <view class="text-content">
                <view class="content content-{{text}}">
                    {{showContent}}
                </view>
            </view>
        </view>
    </view>
    <view>
        <button class="btn" type="primary" bind:tap="addLine">add line</button>
        <button class="btn" type="primary" bind:tap="removeLine">remove line</button>
    </view>
</view>

Page({
    data: {
        texts: [
            '20px', '17px', '14px', '13px'
        ],
        showContent: '这是一段测试文本，可以折行，这是一段测试文本，可以折行，',
        text: '这是一段测试文本，可以折行，',
        n: 2
    },
    setText(n) {
        let showContent = this.getData('text').repeat(n);
        this.setData({
            showContent
        });
    },
    setN(n) {
        this.setData({
            n
        });
    },
    onShow() {
        let n = this.getData('n');
        this.setText(n);
    },
    addLine() {
        let n = this.getData('n');
        n++;
        this.setText(n);
        this.setN(n);
    },
    removeLine() {
        let n = this.getData('n');
        n > 0 && n--;
        this.setText(n);
        this.setN(n);
    }
});

rich-text

---

解释：富文本

属性说明:

属性名	类型	默认值	说明
nodes	Array / String	[]	节点列表 / HTML String

支持默认事件，包括：tap、touchstart、touchmove、touchcancel、touchend和longtap

nodes 属性推荐使用 Array 类型，由于组件会将 String 类型转换为 Array 类型，因而性能会有所下降

nodes

现支持两种节点，通过type来区分，分别是元素节点和文本节点，默认是元素节点，在富文本区域里显示的HTML节点

元素节点：type = node

属性说明:

属性名	说明	类型	必填	备注
name	标签名	String	是	支持部分受信任的HTML节点
attrs	属性	Object	否	支持部分受信任的属性，遵循Pascal命名法
children	子节点列表	Array	否	结构和nodes一致

文本节点：type = text

属性说明:

属性名	说明	类型	必填	备注
text	文本	String	是	支持entities

受信任的HTML节点及属性

全局支持class和style属性，不支持id属性。属性说明:

节点	属性
a
abbr
b
blockquote
br
code
col	span，width
colgroup	span，width
dd
del
div
dl
dt
em
fieldset
h1
h2
h3
h4
h5
h6
hr
i
img	alt，src，height，width
ins
label
legend
li
ol	start，type
p
q
span
strong
sub
sup
table	width
tbody
td	colspan，height，rowspan，width
tfoot
th	colspan，height，rowspan，width
thead
tr
ul

<!-- rich-text.swan -->
<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 World!'
        }]
        }]
    },
    tap() {
        console.log('tap')
    }
})

Tips： 1.nodes 不推荐使用 String 类型，性能会有所下降。 2.rich-text 组件内屏蔽所有节点的事件。 3.nattrs 属性不支持 id ，支持 class。 4.name 属性大小写不敏感。 5.如果使用了不受信任的HTML节点，该节点及其所有子节点将会被移除。 6.img 标签仅支持网络图片。 7.如果在自定义组件中使用 rich-text 组件，那么仅自定义组件的 swan 样式对 rich-text 中的 class 生效。

progress

---

解释：进度条

属性说明：

属性名	类型	默认值	说明
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：动画从上次结束点接着播

示例：

<!-- progress.swan -->
<view class="section">
    <progress percent="20" show-info />
    <progress percent="40" stroke-width="12" />
    <progress percent="60" color="pink" />
    <progress percent="80" active />
</view>

animation-view

---

解释：Lottie动画组件

属性说明：

属性名	类型	必填	默认值	说明
path	String	是		动画资源地址，目前只支持绝对路径
loop	Boolean	否	false	动画是否循环播放
autoplay	Boolean	否	true	动画是否自动播放
action	String	否	play	动画操作，可取值 play、pause、stop
hidden	Boolean	否	true	是否隐藏动画

Tips:

animation-view组件的位置信息、padding值以path里传的json文件里的left、top、padding值为准。animation-view组件不支持原生组件嵌套示例：

<!-- animation-view.swan -->
<view>
    <animation-view id="myAnim" action="{{action}}" hidden="{{hidden}}" class="controls" autoplay="false" path="{{path}}">
    </animation-view>
</view>

Page({
    data: {
        path: '/anims/anim_one.json',
        action: 'play',
        hidden: false
    }
});