百度智能小程序組件 基礎(chǔ)內(nèi)容

icon

---

解釋：圖標(biāo)

屬性說(shuō)明:

屬性名	類型	默認(rèn)值	說(shuō)明
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

---

解釋：放文本的元素

屬性說(shuō)明:

屬性名	類型	默認(rèn)值	說(shuō)明
selectable	Boolean	false	文本是否可選
space	String	false	顯示連續(xù)空格

space 有效值:
屬性說(shuō)明:

值	說(shuō)明
ensp	中文字符空格一半大小
emsp	中文字符空格大小
nbsp	根據(jù)字體設(shè)置的空格大小

注意：

  組件內(nèi)只支持 嵌套。 示例：

<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: '這是一段測(cè)試文本，可以折行，這是一段測(cè)試文本，可以折行，',
        text: '這是一段測(cè)試文本，可以折行，',
        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

---

解釋：富文本

屬性說(shuō)明:

屬性名	類型	默認(rèn)值	說(shuō)明
nodes	Array / String	[]	節(jié)點(diǎn)列表 / HTML String

支持默認(rèn)事件，包括：tap、touchstart、touchmove、touchcancel、touchend和longtap

nodes 屬性推薦使用 Array 類型，由于組件會(huì)將 String 類型轉(zhuǎn)換為 Array 類型，因而性能會(huì)有所下降

nodes

現(xiàn)支持兩種節(jié)點(diǎn)，通過type來(lái)區(qū)分，分別是元素節(jié)點(diǎn)和文本節(jié)點(diǎn)，默認(rèn)是元素節(jié)點(diǎn)，在富文本區(qū)域里顯示的HTML節(jié)點(diǎn)

元素節(jié)點(diǎn)：type = node

屬性說(shuō)明:

屬性名	說(shuō)明	類型	必填	備注
name	標(biāo)簽名	String	是	支持部分受信任的HTML節(jié)點(diǎn)
attrs	屬性	Object	否	支持部分受信任的屬性，遵循Pascal命名法
children	子節(jié)點(diǎn)列表	Array	否	結(jié)構(gòu)和nodes一致

文本節(jié)點(diǎn)：type = text

屬性說(shuō)明:

屬性名	說(shuō)明	類型	必填	備注
text	文本	String	是	支持entities

受信任的HTML節(jié)點(diǎn)及屬性

全局支持class和style屬性，不支持id屬性。屬性說(shuō)明:

節(jié)點(diǎn)	屬性
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 類型，性能會(huì)有所下降。 2.rich-text 組件內(nèi)屏蔽所有節(jié)點(diǎn)的事件。 3.nattrs 屬性不支持 id ，支持 class。 4.name 屬性大小寫不敏感。 5.如果使用了不受信任的HTML節(jié)點(diǎn)，該節(jié)點(diǎn)及其所有子節(jié)點(diǎn)將會(huì)被移除。 6.img 標(biāo)簽僅支持網(wǎng)絡(luò)圖片。 7.如果在自定義組件中使用 rich-text 組件，那么僅自定義組件的 swan 樣式對(duì) rich-text 中的 class 生效。

progress

---

解釋：進(jìn)度條

屬性說(shuō)明：

屬性名	類型	默認(rèn)值	說(shuō)明
percent	Float	無(wú)	百分比 0~100
show-info	Boolean	false	在進(jìn)度條右側(cè)顯示百分比
stroke-width	Number	6	進(jìn)度條線的寬度，單位 px
color	Color	#09BB07	進(jìn)度條顏色 （請(qǐng)使用 activeColor）
activeColor	Color		已選擇的進(jìn)度條的顏色
backgroundColor	Color		未選擇的進(jìn)度條的顏色
active	Boolean	false	進(jìn)度條從左往右的動(dòng)畫
active-mode	String	backwards	backwards: 動(dòng)畫從頭播；forwards：動(dòng)畫從上次結(jié)束點(diǎn)接著播

示例：

<!-- 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動(dòng)畫組件

屬性說(shuō)明：

屬性名	類型	必填	默認(rèn)值	說(shuō)明
path	String	是		動(dòng)畫資源地址，目前只支持絕對(duì)路徑
loop	Boolean	否	false	動(dòng)畫是否循環(huán)播放
autoplay	Boolean	否	true	動(dòng)畫是否自動(dòng)播放
action	String	否	play	動(dòng)畫操作，可取值 play、pause、stop
hidden	Boolean	否	true	是否隱藏動(dòng)畫

Tips:

animation-view組件的位置信息、padding值以path里傳的json文件里的left、top、padding值為準(zhǔn)。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
    }
});