Blend 幻燈片使用

概述

在多數(shù)的應(yīng)用中都會(huì)使用到幻燈片的功能，BlendUI中對(duì)幻燈片做了優(yōu)化處理，使開發(fā)者使用起來(lái)更簡(jiǎn)單，用戶體驗(yàn)更流暢。

幻燈片簡(jiǎn)單使用

在BlendUI中我們可以使用Slider來(lái)定義一個(gè)幻燈片，我們只需要配置相應(yīng)的參數(shù)即可，格式如下：

slider = new Blend.ui.Slider({
    "id" : "sliderId",
    "bgColor" : "#cccccc",
    "images" : images //圖片資源，json數(shù)組
    "width" : 100,
    "height" : 200
});

一個(gè)簡(jiǎn)單的實(shí)例：

var images = [{"url":"http://static.wenku.bdimg.com/topic/wapTopics/old_07_02.jpg"},
              {"url":"http://static.wenku.bdimg.com/topic/wapTopics/old_09_02.jpg"}];
document.addEventListener("blendready", function () {
    slider = new Blend.ui.Slider({
        "id": "sliderId",
        "bgColor": "#cccccc",
        "images": images,
        "height": 200,
        "top": 0,
        "left": 0
    });
});

溫馨提示：這里定義的幻燈片并不會(huì)自動(dòng)切換，需要用戶滑動(dòng)切換各個(gè)頁(yè)面

加入Indicator

Indicator為幻燈片下的指示小圓點(diǎn)，如果您需要在應(yīng)用中幻燈片下面顯示這些指示小圓點(diǎn)，可以使用下面的方法加入：

顯示指示小圓點(diǎn)配置項(xiàng)：

hasIndicator:true,

非當(dāng)前幻燈片下指示小圓點(diǎn)顯示顏色配置項(xiàng)：

inactiveColor:"#ebebeb",

當(dāng)前指示幻燈片下小圓點(diǎn)顯示顏色配置項(xiàng)：

activeColor:"#3c9c76",

每個(gè)指示小圓點(diǎn)的大?。?/p>

unitSize:6,

每個(gè)指示小圓點(diǎn)之間的間距：

unitSpace:3

一個(gè)實(shí)例：

var images = [{"url":"http://static.wenku.bdimg.com/topic/wapTopics/old_07_02.jpg"},
              {"url":"http://static.wenku.bdimg.com/topic/wapTopics/old_09_02.jpg"}];
document.addEventListener("blendready", function () {
    slider = new Blend.ui.Slider({
        "id": "test",
        "bgColor": "#cccccc",
        "images": images,
        "height": 200,
        "top": 0,
        "left": 0,
        hasIndicator: true,
        inactiveColor: "#ebebeb",
        activeColor: "#3c9c76",
        unitSize: 16,
        unitSpace: 10            
    });
});

加入事件

當(dāng)我們需要對(duì)幻燈片的一些事件進(jìn)行監(jiān)聽和處理的時(shí)候，可以使用下面的方法：

slide

當(dāng)我們手動(dòng)翻頁(yè)時(shí)觸發(fā)，格式如下：

"slide" : function(e){
    console.log(e.data.index);
}

tap

當(dāng)點(diǎn)擊一個(gè)頁(yè)面時(shí)觸發(fā)，格式如下：

"tap" : function(e){
    console.log(e.data.index);
}

一個(gè)實(shí)例：

var images = [{"url":"http://static.wenku.bdimg.com/topic/wapTopics/old_07_02.jpg"},
              {"url":"http://static.wenku.bdimg.com/topic/wapTopics/old_09_02.jpg"}];
document.addEventListener("blendready", function () {
    slider = new Blend.ui.Slider({
        "id": "test",
        "bgColor": "#cccccc",
        "images": images,
        "height": 200,
        "top": 0,
        "left": 0,
        hasIndicator: true,
        inactiveColor: "#ebebeb",
        activeColor: "#3c9c76",
        unitSize: 16,
        unitSpace: 10,
        "tap": function (e) {
            //手動(dòng)點(diǎn)擊時(shí)打印當(dāng)前幻燈片的編號(hào)
            console.log(e.data.index);
        },
        "slide": function (e) {
            //滑動(dòng)時(shí)打印當(dāng)前幻燈片的編號(hào)
            console.log(e.data.index);
        }
    });
});

Slider間跳轉(zhuǎn)

BlendUI提供下面三個(gè)方法使開發(fā)者可以自由在Slider間跳轉(zhuǎn)。

prev()

滾動(dòng)到前一個(gè)頁(yè)面

var slider = new Blend.ui.Slider({
    "id": "slider",
    "images": [
        {"url":"http://*.com/old_07_02.jpg"},
        {"url":"http://*.com/old_09_02.jpg"}
     ]
});

slider.prev();

next()

滾動(dòng)到下一個(gè)頁(yè)面

var slider = new Blend.ui.Slider({
    "id": "slider",
    "images": [
        {"url":"http://*.com/old_07_02.jpg"},
        {"url":"http://*.com/old_09_02.jpg"}
     ]
});

slider.next();

sliderTo(index)

滾動(dòng)到指定的index個(gè)頁(yè)面

var slider = new Blend.ui.Slider({
    "id": "slider",
    "images": [
        {"url":"http://*.com/old_07_02.jpg"},
        {"url":"http://*.com/old_09_02.jpg"}
     ]
});

slider.sliderTo(0);

示例源碼

在線獲取源碼