JavaScript使用DeviceOne开发实战（五）仿ZAKER应用

关于index底下切换的的组件，可以用ViewShower实现，详见：

do_ViewShower

http://bbs.deviceone.net/forum.php?mod=viewthread&tid=128&extra=page%3D3

http://bbs.deviceone.net/forum.php?mod=viewthread&tid=131&extra=page%3D3

（如图）

 

绑定数据：

do_ListData

http://bbs.deviceone.net/forum.php?mod=viewthread&tid=154&extra=page%3D2

 

里面可以上下滑动使用了两个东西：do_ListView 和do_ScrollView

ListView适合放上下一模一样的东西，但不支持编辑，所以如果要编辑就使用LinearLayout，另外ScrollView是比较简单的上下滑动的组件，因为它直接就是写多高就多长，不那么灵活，详见底下demo:

do_ListView

http://bbs.deviceone.net/forum.php?mod=viewthread&tid=142&extra=page%3D3

http://bbs.deviceone.net/forum.php?mod=viewthread&tid=119&extra=page%3D4

do_LinearLayout

http://bbs.deviceone.net/forum.php?mod=viewthread&tid=148&extra=page%3D3

do_ScrollView

http://bbs.deviceone.net/forum.php?mod=viewthread&tid=127&extra=page%3D3

（如图）[attach]295[/attach]

 

百度定位使用的组件详见底下demo:

do_BaiduLocation

http://store.deviceone.net/Documents/do_BaiduLocation/2.0.html

[mw_shl_code=javascript,true]bdlocation.on("result",function(data, e){
    label_address.text = data.address;
    bdlocation.stop();
});
bdlocation.start();[/mw_shl_code]

 

滑动切换使用了do_segmentview和do_SlideView详见demo:

do_SlideView

http://bbs.deviceone.net/forum.php?mod=viewthread&tid=139&extra=page%3D3

http://bbs.deviceone.net/forum.php?mod=viewthread&tid=40&extra=page%3D4

[mw_shl_code=javascript,true]/***********************************************************/
//当segmentview的index变化时,读取
do_segmentview_1.on("indexChanged", function(index){
        if(index == this.index){
                return;
        }
    do_slideview_1.set({index: index});
    do_slideview_1.refreshItems({});
    changecolor(index);
});
/***********************************************************/
//slideview绑定数据
slide_listdata.addData([ 
        {template: 0},
    {template: 1},
    {template: 2}
]);
do_slideview_1.refreshItems();
/***********************************************************/
//当slideview的index变化时,读取
do_slideview_1.on("indexChanged", function(index){
    do_segmentview_1.set({index: index});
    changecolor(index);

});[/mw_shl_code]

上下刷新：

[mw_shl_code=javascript,true]listview.on("pull", function(data) {

    /**
     * @此事件将会多次执行.
     * @state == 0 : pull动作开始
     * @state == 1 : pull动作持续中
     * @state == 2 : pull动作结束
     */
    if (data.state !== 2) return;
    this.rebound();
});
listview.on("push", function(data) {
    /**
     * @此事件将会多次执行.
     * @state == 0 : pull动作开始
     * @state == 1 : pull动作持续中
     * @state == 2 : pull动作结束
     */
    if (data.state !== 2) return;
    this.rebound();
});[/mw_shl_code]

添加定时器来改变广告：
组件do_Timer：
http://bbs.deviceone.net/forum.php?mod=viewthread&tid=135&extra=page%3D3
[mw_shl_code=javascript,true]var page = sm("do_Page");
var i=1,y=0;
var timer01 = mm("do_Timer");
timer01.delay = 0;
timer01.interval = 100;

var DURATION01 = 0;

timer01.on("tick", function(){
    if(DURATION01 >= 30){
        DURATION01 = 0;
        slideview.index=i%4;
        i++;
    }
    DURATION01++;
});
timer01.start();[/mw_shl_code]

9.21更新：
订阅界面的顶部图片和底下的logo点击可以进入新界面
其中顶部图片是slideview：
       在slideview的templates里的ui写点击事件打开新界面；然后用传送的data来判断第几个图片；
[mw_shl_code=javascript,true]app.openPage({source:"source://view/ding/slideview/sli_de.ui", data:"1", animationType:"", isFullScreen:false, keyboardMode:"default", scriptType:""}, function(data, e){});[/mw_shl_code]
底下的logo是grid_view：
[mw_shl_code=javascript,true] grid_view1.on("touch",function(data, e){                       //griview点击事件
//         nf.alert(_data[data]);
         app.openPage({source:"source://view/ding/ding_de.ui", data:data, animationType:"", isFullScreen:false, keyboardMode:"default", scriptType:""}, function(data, e){});
        });[/mw_shl_code]

再此附上git地址：https://github.com/do-project/zaker