仿淘宝移动端案例布局新建文件夹88
资源详情
【学习目标】通过学习仿淘宝app.掌握使用向导生成一个应用.初步了解图片轮播、二级门户图标、广告栏、双列列表、本地存储（h5 localstorage）以及遮罩的使用。【案例说明】仿淘宝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) { //数据模型创建之前事件 var carousel = this.comp(“carousel1”); var fimgurl =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 { //显示上次看过的图片 var furl = localstorage.getitem(“index_bannerimg_url”); $(carousel.domnode).find(“img”).eq(0).attr({ “src” :fimgurl. “pagename”: furl }); } };
model.prototype.imgdatacustomrefresh = function(event) { //获取新的图片数据 var url = require.tourl(“./main/json/imgdata.json”); alldata.loaddatafromfile(url.event.source. true); //加载新的图片数据
var carousel = this.comp(“carousel1”); event.source.each(function(obj) { var fimgurl = require.tourl(obj.row.val(“fimgurl”)); var furl = 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样式.单列列表即刻变成双列列表。
