联系客服1
联系客服2

仿淘宝移动端案例布局,全套视频教程学习资料通过百度云网盘下载

0
回复
320
查看
打印 上一主题 下一主题
[复制链接]
  • TA的每日心情
    开心
    2024-9-19 21:14
  • 签到天数: 757 天

    [LV.10]以坛为家III

    7335

    主题

    8751

    帖子

    131万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    1312677
    楼主
    发表于 2021-4-15 04:16:13 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

    资源详情


    【学习目标】
    通过学习仿淘宝App,掌握使用向导生成一个应用,初步了解图片轮播、二级门户图标、广告栏、双列列表、本地存储(H5LocalStorage)以及遮罩的使用。

    【案例说明】

    仿淘宝App是一款模仿淘宝App界面风格的软件,提供首页、商品分类页、搜索页、商品列表页、商品详细页、购物车页等页面,数据使用静态数据。运行效果如图1-37.

    开发App的完整过程参考1.3.2 开发过程一节。首先新建一个应用taobao。再新建一个W文件,在“新建W向导”中选择模板“移动→应用→仿淘宝”,文件名输入index,就在taobao目录下建出了完整的仿淘宝应用。下面介绍首页main.w和列表页list.w上常用的功能是如何实现的。
    1.7.1首页
    1.图片轮播



    Bootstrap提供了图片轮播组件carousel,carousel可以预置几张图片,也支持使用add方法动态增加图片。仿淘宝提供动态更新图片的能力,具体做法是预置一张图片,用于快速显示,再从服务端获取新的图片,动态增加到carousel中。

     

    在数据模型创建之前的事件中,即model组件的onModelConstruct事件中,设置预留图片的src,用于快速显示图片。在新的图片数据刷新之后,修改预置图片的src指向新的图片,并增加其他的新图片。仿淘宝首页main.w中的代码如下:

      

          Model.prototype.modelModelConstruct=function(event){    //数据模型创建之前事件

                 varcarousel=this.comp("carousel1");

                 varfImgUrl=localStorage.getItem("index_BannerImg_src");

                 if(fImgUrl==undefined){                         //第一次使用,显示指定图片

                        $(carousel.domNode).find("img").eq(0).attr({

                               "src":"./main/img/carouselBox61.jpg",

                               "goodsID":"1",

                               "pagename":"./detail.w"

                        });

                 }else{                                         //显示上次看过的图片

                        varfUrl=localStorage.getItem("index_BannerImg_url");

                        $(carousel.domNode).find("img").eq(0).attr({

                               "src":fImgUrl,

                               "pagename":fUrl

                        });

                 }

          };

       

          Model.prototype.imgDataCustomRefresh=function(event){ //获取新的图片数据

                 varurl=require.toUrl("./main/json/imgData.json");  

                 allData.loadDataFromFile(url,event.source,true);      //加载新的图片数据

     

                 varcarousel=this.comp("carousel1");

                 event.source.each(function(obj){

                        varfImgUrl=require.toUrl(obj.row.val("fImgUrl"));

                        varfUrl=require.toUrl(obj.row.val("fUrl"));

                        if(obj.index==0){    //修改预置图片的src,指向新图片,并存储起来下次用

                               localStorage.setItem("index_BannerImg_src",fImgUrl);

                               localStorage.setItem("index_BannerImg_url",fUrl);

                               $(carousel.domNode).find("img").eq(obj.index).attr({

                                      "src":fImgUrl,

                                      "pagename":fUrl

                               });

                        }else{                                   //增加新的图片

                               carousel.add('');

                        }

                 });

          };

     

    2.二级门户图标

    从“天猫”、“聚划算”到“宝箱”、“分类”的这十个图标,称为二级门户图标,以两行,五列的形式展现,单击其中的图标打开相应的二级门户页面。

    使用Bootstrap的table组件实现。在table中增加两行tr,每行增加五列td,每个td里面用image组件显示二级门户图标,用span组件显示二级门户名称。在td的单击事件中写代码打开二级门户页面。

     

    3.广告栏

    由“淘抢购”、“有好货”、“爱逛街”和“每日首发”形成了一个广告栏。在电商首页中,这种形式的广告栏比比皆是。通过学习制作这种广告栏的方法,掌握Bootstrap的row组件的原理,举一反三可以制作出其他形式的广告栏。界面设计如图1-40.

    观察广告栏,一个广告栏就是一行,把这一行分为左右两列,左列中放“淘抢购”,右列中分为上下两行,上面的行里面放“有好货”,下面的行里面再分成两列,分别放“爱逛街”和“每日首发”。这样就形成了这种广告栏的格局。

    接下来需要设置列的宽度,图片的宽度在设置为100%后,会根据所在列的宽度进行自适应,即列的高度由自适应后的图片的高度决定。Bootstrap在实现响应式布局时,使用行组件row(bootstrap),将row的宽度分为十二等份,通过样式设置每列占其中的几等份。占一等份的样式是col-xs-1,占两等份的样式是col-xs-2,以此类推占满一行的样式是col-xs-12,一行中不管有几列,他们的宽度样式加起来等于十二,就说明这几列会显示在一行中。

    在这个广告栏中的四列都需要设置宽度样式,从效果上看,“淘抢购”所在的列应该设置样式为col-xs-5,表示占五等份,与之对应的右列占七等份,样式设置为col-xs-7。右列中又分为两行,上面一行“有好货”占满一行,设置列的样式为col-xs-12,下面一行中“爱逛街”和“每日首发”的宽度相同,各占六等份,样式都设置为col-xs-6。这些样式设置在列col的class属忄生上。

     

    4.双列列表

    在“1.5.1开发账目列表”一节中,使用list组件显示账目列表,一行显示一个账目信息,这种列表称为单列列表。即在一行中显示一个商品信息,就是单列列表,把一行分为左右两列,分别显示两个商品信息,就是双列列表。

     

    通过学习制作广告栏,发现Bootstrap提供了设置列宽占比的样式,只需给list组件的li增加col-xs-6样式,单列列表即刻变成双列列表。









    游客,如果您要查看本帖隐藏内容请回复
    收藏
    收藏0
    分享
    分享
    支持
    支持0
    反对
    反对0
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    学习课程!一站搞定!
    学途无忧VIP会员群

    973849140

    周一至周日9:00-23:00

    反馈建议

    1227072433@qq.com 在线QQ咨询

    扫描二维码关注我们

    学途无忧!为学习谋坦途,为会员谋福利!|网站地图