百度智能小程序API 界面

交互反饋

showToast

解釋?zhuān)猴@示消息提示框

參數(shù)：Object

Object參數(shù)說(shuō)明：

示例：

swan.showToast({
    title: '我是標(biāo)題',
    icon: 'loading',
    duration: 1000,
});

showLoading

解釋?zhuān)猴@示 loading 提示框, 需主動(dòng)調(diào)用 hideLoading 才能關(guān)閉提示框

參數(shù)：Object

Object參數(shù)說(shuō)明：

hideToast

解釋?zhuān)弘[藏消息提示框

hideLoading

解釋?zhuān)弘[藏 loading 提示框

示例：

swan.showLoading({
    title: '加載中',
    mask: 'true'
});

setTimeout(function() {
    swan.hideLoading();
}, 2000);

showModal

解釋?zhuān)猴@示模態(tài)彈窗

參數(shù)：Object

Object參數(shù)說(shuō)明：

success返回參數(shù)說(shuō)明：

示例：

swan.showModal({
    title: '提示',
    content: '這是一個(gè)模態(tài)彈窗',
    cancelColor: '#999999',
    confirmColor: '#0099cc',
    success: function (res) {
        if (res.confirm) {
            console.log('用戶(hù)點(diǎn)擊了確定');
        } else if (res.cancel) {
            console.log('用戶(hù)點(diǎn)擊了取消');
        }
    }
});

showActionSheet

解釋?zhuān)?顯示操作菜單

參數(shù)：Object

?Object參數(shù)說(shuō)明：

success返回參數(shù)說(shuō)明：

示例：

swan.showActionSheet({
    itemList: ['同意', '一般', '不同意'],
    success: function (res) {
        console.log('用戶(hù)點(diǎn)擊了第' + (res.tapIndex + 1) + '按鈕');
    }
});

設(shè)置導(dǎo)航條

setNavigationBarTitle

解釋?zhuān)簞?dòng)態(tài)設(shè)置當(dāng)前頁(yè)面的標(biāo)題。

參數(shù)：Object

Object參數(shù)說(shuō)明：

示例：

swan.setNavigationBarTitle({
    title: '我是頁(yè)面標(biāo)題'
});

showNavigationBarLoading

解釋?zhuān)涸摲椒ㄔ诋?dāng)前頁(yè)面顯示導(dǎo)航條加載動(dòng)畫(huà)

hideNavigationBarLoading

解釋?zhuān)弘[藏導(dǎo)航條加載動(dòng)畫(huà)。

setNavigationBarColor

Object參數(shù)說(shuō)明：

animation.timingFunc 有效值：

success返回參數(shù)說(shuō)明：

示例：

swan.setNavigationBarColor({
    frontColor: '#ffffff',
    backgroundColor: '#ff0000',
    animation: {
        duration: 500,
        timingFunc: 'linear'
	}
});

設(shè)置tabBar

setTabBarBadge

解釋?zhuān)簽?tabBar 某一項(xiàng)的右上角添加文本

參數(shù)：Object

Object 參數(shù)說(shuō)明：

示例：

swan.setTabBarBadge({
    index: '0',
    text: '文本'
});

removeTabBarBadge

解釋?zhuān)阂瞥齮abBar某一項(xiàng)右上角的文本。

Object 參數(shù)說(shuō)明：

示例：

swan.removeTabBarBadge({
    index: '1'
});

showTabBarRedDot

解釋?zhuān)猴@示 tabBar 某一項(xiàng)的右上角的紅點(diǎn)

參數(shù)：Object

Object 參數(shù)說(shuō)明：

示例：

swan.showTabBarRedDot({
    index: '1'
});

hideTabBarRedDot

解釋?zhuān)弘[藏 tabBar 某一項(xiàng)的右上角的紅點(diǎn)

參數(shù)：Object

Object 參數(shù)說(shuō)明：

示例：

swan.hideTabBarRedDot({
    index: '1'
});

setTabBarStyle

解釋?zhuān)簞?dòng)態(tài)設(shè)置 tabBar 的整體樣式

參數(shù)：Object

Object 參數(shù)說(shuō)明：

示例：

swan.setTabBarStyle({
    color: '##FFFFBD',
    selectedColor: '##FFFFBD',
    backgroundColor: '##FFFFBD',
    borderStyle: 'white'
});

setTabBarItem

解釋?zhuān)簞?dòng)態(tài)設(shè)置 tabBar 某一項(xiàng)的內(nèi)容

參數(shù)：Object

Object 參數(shù)說(shuō)明：

示例：

swan.setTabBarItem({
    index: '0',
    text: 'tabBar按鈕',
    // 圖片路徑 
    iconPath: '/images/component_normal.png',
    // 選中圖片路徑
    selectedIconPath: '/images/component_selected.png',
});

showTabBar

解釋?zhuān)猴@示 tabBar

參數(shù)：Object

Object 參數(shù)說(shuō)明：

示例：

swan.showTabBar({
    success: function (res) {
        console.log(res);
    },
    fail: function (err) {
        console.log('錯(cuò)誤碼：' + err.errCode);
        console.log('錯(cuò)誤信息：' + err.errMsg);
    }
});

hideTabBar

解釋?zhuān)弘[藏 tabBar

參數(shù)：Object

Object 參數(shù)說(shuō)明：

示例：

swan.hideTabBar({
    success: function (res) {
        console.log(res);
    },
    fail: function (err) {
        console.log('錯(cuò)誤碼：' + err.errCode);
        console.log('錯(cuò)誤信息：' + err.errMsg);
    }
});

導(dǎo)航

navigateTo

解釋?zhuān)罕Ａ舢?dāng)前頁(yè)面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面，使用 swan.navigateBack 可以返回到原頁(yè)面。

參數(shù)：Object

注意：為了不讓用戶(hù)在使用智能小程序時(shí)造成困擾，我們規(guī)定頁(yè)面路徑只能是五層，請(qǐng)盡量避免多層級(jí)的交互方式。

Object 參數(shù)說(shuō)明：

示例：

swan.navigateTo({
    url: 'example/xxx?key=value'
});

redirectTo

解釋?zhuān)宏P(guān)閉當(dāng)前頁(yè)面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面

參數(shù)：Object

Object 參數(shù)說(shuō)明：

示例：

swan.redirectTo({
    url: 'example/xxx?key=value'
});

switchTab

解釋?zhuān)禾D(zhuǎn)到 tabBar 頁(yè)面，并關(guān)閉其他所有非 tabBar 頁(yè)面

參數(shù)：Object

Object 參數(shù)說(shuō)明：

示例：

{
    "tabBar": {
        "list": [{
            "pagePath": "index",
            "text": "首頁(yè)"
        },{
            "pagePath": "list",
            "text": "列表"
        }]
    }
}

swan.switchTab({
    url: '/list',
});

navigateBack

解釋?zhuān)宏P(guān)閉當(dāng)前頁(yè)面，返回上一頁(yè)面或多級(jí)頁(yè)面。

參數(shù)：Object

Object 參數(shù)說(shuō)明：

示例：

// 注意：調(diào)用 navigateTo 跳轉(zhuǎn)時(shí)，調(diào)用頁(yè)面會(huì)被加入堆棧，而 redirectTo 方法則不會(huì)。見(jiàn)下方示例代碼

// 當(dāng)前是首頁(yè)
swan.navigateTo({
    url: 'list?key=value'
});

// 當(dāng)前是列表頁(yè)
swan.navigateTo({
    url: 'detail?key=value'
});

// 在詳情頁(yè)內(nèi) navigateBack，將返回首頁(yè)
swan.navigateBack({
    delta: 2
});

reLaunch

解釋?zhuān)宏P(guān)閉所有頁(yè)面，打開(kāi)到應(yīng)用內(nèi)的某個(gè)頁(yè)面。

參數(shù)：Object

Object 參數(shù)說(shuō)明：

示例：

swan.reLaunch({
    url: 'example/xxx?key=value'
});

動(dòng)畫(huà)

createAnimation

解釋?zhuān)簞?chuàng)建一個(gè)動(dòng)畫(huà)實(shí)例 animation

參數(shù)：Object

Object 參數(shù)說(shuō)明：

timingFunction 有效值：

var animation = swan.createAnimation({
  transformOrigin: "50% 50%",
  duration: 1000,
  timingFunction: "ease",
  delay: 0
});

解釋?zhuān)簞?dòng)畫(huà)實(shí)例可以調(diào)用以下方法來(lái)描述動(dòng)畫(huà)，調(diào)用結(jié)束后會(huì)返回自身，支持鏈?zhǔn)秸{(diào)用的寫(xiě)法。

animation方法列表

普通樣式：

旋轉(zhuǎn)：

縮放：

偏移：

傾斜：

矩陣變形：

動(dòng)畫(huà)隊(duì)列

調(diào)用動(dòng)畫(huà)操作方法后要調(diào)用 step() 來(lái)表示一組動(dòng)畫(huà)完成，可以在一組動(dòng)畫(huà)中調(diào)用任意多個(gè)動(dòng)畫(huà)方法，一組動(dòng)畫(huà)中的所有動(dòng)畫(huà)會(huì)同時(shí)開(kāi)始，一組動(dòng)畫(huà)完成后才會(huì)進(jìn)行下一組動(dòng)畫(huà)。

示例：

<view bind:tap="starttoanimate" animation="{{animationData}}"></view>

Page({
    data: {
        animationData: {}
    },
    starttoanimate: function () {
        var animation = swan.createAnimation();
        animation.rotate(90).translateY(10).step();
        animation.rotate(-90).translateY(-10).step();
        this.setData({
            animationData: animation.export()
        });
    }
});

下拉刷新

onPullDownRefresh

解釋?zhuān)涸?Page 中定義 onPullDownRefresh 處理函數(shù)，監(jiān)聽(tīng)該頁(yè)面用戶(hù)下拉刷新事件。

參數(shù)：Object

示例：

Page({
    onPullDownRefresh() {
        // do something
    }
});

startPullDownRefresh

解釋?zhuān)洪_(kāi)始下拉刷新，調(diào)用后觸發(fā)下拉刷新動(dòng)畫(huà)，效果與用戶(hù)手動(dòng)下拉刷新一致

參數(shù)：Object

Object參數(shù)說(shuō)明：

success返回參數(shù)說(shuō)明：

示例：

swan.startPullDownRefresh();

解釋?zhuān)和Ｖ巩?dāng)前頁(yè)面下拉刷新。

參數(shù)：無(wú)

示例：

swan.stopPullDownRefresh();