下载文档

引导页
更新时间:2016-04-26

案例说明:

本案例为一个海外购物App,满足用户购买海外商品的需求,同时身处海外的用户通过资质审核后,也可以实时发布商品,案例使用了多个AppCan插件以实现各种丰富功能。

整个App大体的框架,尝试采用4个window,没有使用浮动窗口,打开首页的时候把4个window都打开,但是在打开window的时候window flags传的是36=32+4,即uex.cWindowFlagHidden=32//标记被open的window为隐藏的。隐藏的window不会显示到屏幕上,只存在于后台。每次点击底部兰切换,只是把相应的window显示出来。

案例源码请点击:http://bbs.appcan.cn/forum.php?mod=viewthread&tid=48535

项目实现功能:

用户注册、登录,商品查看和发布,加入购物车、在线支付,交易确认,地理定位,商品查询、评论和分享、关注商家等。

项目使用插件:


引导页效果图:



1.UI代码

  1. <div id='content' class='ub-f1 tx-l t-bla ub-img6 res10 uof ' >
  2. <div id="slider" class="ub-con ub">
  3. <div class="ub-fh ub-fv bgsize " style="background-image: url('image/guide/1.png');background-size: 100% 100%" id="img1"></div>
  4. <div class="ub-fh ub-fv bgsize " style="background-image: url('image/guide/2.png');background-size: 100% 100%" id="img2"></div>
  5. <div class="ub-fh ub-fv bgsize " style="background-image: url('image/guide/3.png');background-size: 100% 100%" id="img6">
  6. <div class="ub ub-fh ub-fv ub-ver" >
  7. <div class="ub ub-f1"></div>
  8. <div class="btn ub ub-ac ub-pc" onclick="go();" style="width:41%;height: 10%;margin-left: 25%;margin-bottom: 40%;">
  9. </div>
  10. </div>
  11. </div>
  12. </div>

引导页3张图片采用的是slider,全屏显示的slider,控制图片滑动的js代码如下:

  1. $('#slider').slide = new zySlide('slider', 'H', function() {
  2. }, false, function(e) {
  3. });

2.首次登陆APP或进入现场详情页面,跳出提示层:



在首页和点击现场进入详情页时判断opentimes来判断是否跳出弹出层。主要代码如下:

  1. var w=screen.availWidth;
  2. $("#content").css("width",w+"px");