Html5移动开发论坛

注册

 

发新话题 回复该主题

【CfxixiJS】如何在HTML5APP中制作LIST滚动Demo [复制链接]

1#
银光图片
Html5 APP 交流 QQ 群 273843464欢迎您的加入
lz做了一个实现LIST滚动的Demo(用iscroll做的滚动),效果如下:



Demo下载:

附件: 你需要登录才可以下载或查看附件。没有帐号? 注册


自由了~~
分享 转发

Sencha Touch 交流 QQ 群 224711028 欢迎您的加入。
PhoneGap安卓 交流 QQ 群 250395324欢迎您的加入。
Html5 APP 交流 QQ 群 273843464欢迎您的加入。
TOP
2#

其实我想要ST出来这个效果的- -
TOP
3#

ST还要容易。。。你list控件里面编辑模板就好了

Sencha Touch 交流 QQ 群 224711028 欢迎您的加入。
PhoneGap安卓 交流 QQ 群 250395324欢迎您的加入。
Html5 APP 交流 QQ 群 273843464欢迎您的加入。
TOP
4#

我现在想做的是这个
就是3列 list 里面的图片是动态往下添加的 然后正个页面是可以向左动态添加   最关键是我刚刚学这个ST  只会很简单的页面布局 控制器跳转什么的 这次涉及到ajax传数据就懵了。
在application实例化了一个view 然后在define这个view的时候就不会了
要不我把代码贴出来吧?
Ext.define("My.view.ImageList", {
    extend: "Ext.Container",
    xtype:'imagelist',
    actionUrl:'action.ashx?op=getImageList',
    constructor: function(a,b,c,d,e) {
        this.callParent(a,b,c,d,e);
        this.contentView=Ext.create('Ext.Container',{
                flex: 1,
                items: [],
                scrollable: {
                    direction: 'horizontal',
                    directionLock: true
                }
        });
        this.add([this.contentView]);
    },
    loadunction(toKenID){
        MyApp.Ajax({
            url: this.actionUrl,
            scope:this,
            loadingLock:true,
            params: {
                'toKenID':toKenID
            },
            onSuccessunction(data){
                this.loadComplete(data);
            }
        })
    },
    loadCompleteunction(data){
        var item=data.rows;
        var Category=[];
        var CategorySource={};
        var reg=new RegExp("/","g");
        for(i=0;i<item.length;i++){
            var imgUrl=item.Src;
            if(imgUrl!=""&&imgUrl!=null){
                imgUrl=imgUrl;
                var thumUrl=imgUrl;    
                var imgSource=CategorySource[item.Category];
                if(!imgSource){
                    Category.push(item.Category);
                    CategorySource[item.Category]=[];
                    imgSource=CategorySource[item.Category];
                }
                imgSource.push({
                    'source':imgUrl,
                    'thumbnail':thumUrl,
                    'title':item.Title,
                    'category':item.Category,
                    'description':item.Description,
                })
            }
        }
        Category=Category.sort();
        var DataSource=[];
        var tempData=[];
        var l=0;
        for(var i=0;i<Category.length;i++){
            if(l<3){
                tempData.push.apply(tempData,CategorySource[Category]);
            }else{
                DataSource.push(tempData);
                tempData=[];
                l=0;
                tempData.push.apply(tempData,CategorySource[Category]);
            }
            l++;
        }
        DataSource.push(tempData);
        this.DataSource=DataSource;
        this.createChildren();
    },
    createChildrenunction(){
         for(var i=0;i<this.DataSource.length;i++){
            var child=Ext.create('My.view.ImageView');
            console.log("123");
            this.contentView.add(child);
            child.buildData(this.DataSource);
         }
        this.doLayout();
        
    }
    //we only give it one item by default, which will be the only item in the 'stack' when it loads
    
    
});
TOP
5#

回复 3楼CF西西的帖子

Ext.define("My.view.ImageView", {
    extend: "Ext.Container",
    xtype:'imageview',
    config: {
        layout: 'hbox'        
    },
    constructor: function(a,b,c,d,e) {
        this.callParent(a,b,c,d,e);
        this.contentHeader=Ext.create('Ext.Container',{
            height: 100
        });
        this.contentBody=Ext.create('Ext.Container',{
            flex: 1,
            items: [],
            scrollable: {
                direction: 'vertical',
                directionLock: true
            }
        });
        this.contentBody.add([]);
        this.add([this.contentHeader,this.contentBody]);
    },
    buildDataunction(data){
        this.data=data;
        var category={count:0,key:[]};
        var tpl="<div style=\"width:100%;height:100px;margin-top:10px;\"><div style=\"float:left;width:33%;text-align:center;\"><!--{0}--></div><div style=\"float:left;width:33%;text-align:center;\"><!--{1}--></div><div style=\"float:left;width:33%;text-align:center;\"><!--{2}--></div></div>"
        var categoryInfo={count:0,index:0};
        var bodyContent="";
        var headerContent="<div style=\"width:100%;height:30px;background-colorfff;font-size:15px;\"><div style=\"float:left;width:33%;text-align:center;\"><!--{0}--></div><div style=\"float:left;width:33%;text-align:center;\"><!--{1}--></div><div style=\"float:left;width:33%;text-align:center;\"><!--{2}--></div></div>";
        var maxCount=0;
        this.ImageList=[];
        for(var i=0;i<data.length;i++){
            var item="<div style=\"width:100%;height:100px;overflow:hidden;\"><img src=\""+data["thumbnail"]+"\" alt=\""+data["title"]+""+i+"\" index=\""+i+"\" width=\"100\" height=\"100\" /></div>";
            if(!category[data["category"]]){
                categoryInfo={
                    count:0,
                    indexegory.count
                }
                category[data["category"]]=categoryInfo;
                headerContent=headerContent.replace("<!--{"+category.count+"}-->",data["category"]);
                category.key.push(data["category"]);
                category.count++;
                
            }else{
                categoryInfo=category[data["category"]];
                categoryInfo.count++;
                if(maxCount<categoryInfo.count)maxCount=categoryInfo.count;
            }
            if(categoryInfo.count<maxCount){
                bodyContent=bodyContent.replace("<!--{col_"+categoryInfo.count+"_"+categoryInfo.index+"}-->",item);                        
            }else{
                var newrow=tpl.replace("{0}","{col_"+categoryInfo.count+"_0}");
                newrow=newrow.replace("{1}","{col_"+categoryInfo.count+"_1}");
                newrow=newrow.replace("{2}","{col_"+categoryInfo.count+"_2}");
                newrow=newrow.replace("<!--{col_"+categoryInfo.count+"_"+categoryInfo.index+"}-->",item);
                bodyContent+=newrow;
            }
        }
        this.contentHeader.setHtml(headerContent);            
        this.contentBody.setHtml(bodyContent);
        this.doLayout();
    }
});

顺便问下lz姐姐 吃饭了没- -我学了3天 还是没进展 刚才被大神训了
TOP
6#

想想web是怎么搞的哈?

Sencha Touch 交流 QQ 群 224711028 欢迎您的加入。
PhoneGap安卓 交流 QQ 群 250395324欢迎您的加入。
Html5 APP 交流 QQ 群 273843464欢迎您的加入。
TOP
7#

下载学习了
TOP
发新话题 回复该主题