引导页

案例说明：

本案例为一个海外购物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");
还需要帮助吗? 联系我们
最新更新 8th Jul 2021