你的位置:首页 > Java教程

[Java教程]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