引导页

案例说明:

本案例为一个海外购物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代码

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

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

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

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


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

var w=screen.availWidth; 
$("#content").css("width",w+"px");
还需要帮助吗? 联系我们
最新更新 18th Nov 2016