平特肖公式网论坛|今晚平特肖开什么呢|

AppCan移动开发:仿19楼生活资讯类APP源码分享

浏览:1504 发布日期:2015/12/29 分类:职场?#24418;?/span> 关键字: appcan 移动开发 源码分享
近日,AppCan社区又有新的干货内容分享,社区昵称为bali的开发者分享了一个仿19楼的App源码。
这个案例主要有四个界面,包括精选、社区、发现、我的,这里主要跟大家说一下精选和社区的实现方法。
详情戳这里:http://bbs.appcan.cn/forum.php?mod=viewthread&tid=43943
“精选”模块??

页面效果:


一、UI部分

1. 新建并修改main.html页面标题内容为:“19楼”


2. 在main.html页面header头部添加如下代码:
<div class="nav-btn"id="nav-left" style="margin-left: 1em"onclick="opennews();">相亲报名</div>


3.在main.html页面header头部下面添加tab选项卡代码:
<div id="tabview"class="uf sc-bg"></div>


4.在main.html页面内容区下面添加footer部分代码:

<div id="footer"style="background-color: #FFFFFF">
? ? ? ? ? ? ? ?<divid="jinxuan"class="ufl footer_width "onclick="open1();" >
? ? ? ? ? ? ? ? ? ?<div id=""class="fa fa-star center uf footer_icon footer_checked" >

? ? ? ? ? ? ? ? ? ?</div>
? ? ? ? ? ? ? ? ? ?<divid=""class=" text1 center footer_checked">
? ? ? ? ? ? ? ? ? ? ? ?精选
? ? ? ? ? ? ? ? ? ?</div>
? ? ? ? ? ? ? ?</div>
? ? ? ? ? ? ? ?<divid="shequ"class="ufl footer_width">
? ? ? ? ? ? ? ? ? ?<div id=""class="fa fa-weixin center uf footer_icon sc-text-tab">

? ? ? ? ? ? ? ? ? ?</div>
? ? ? ? ? ? ? ? ? ?<divid=""class=" text center">
? ? ? ? ? ? ? ? ? ? ? ?社区
? ? ? ? ? ? ? ? ? ?</div>
? ? ? ? ? ? ? ?</div>
? ? ? ? ? ? ? ?<divid="zhuanti"class="ufl footer_width">
? ? ? ? ? ? ? ? ? ?<div id=""class="fa fa-camera center uf footer_icon sc-text-tab">

? ? ? ? ? ? ? ? ? ?</div>
? ? ? ? ? ? ? ? ? ?<divid=""class="center">

? ? ? ? ? ? ? ? ? ?</div>
? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ?<divid="faxian"class="ufl footer_width"onclick="open4();">

? ? ? ? ? ? ? ? ? ?<div id=""class="fa fa-link center uf footer_icon sc-text-tab">

? </div>
? ? ? ? ? ? ? ? ? ?<divid=""class=" text center">
? ? ? ? ? ? ? ? ? ? ? ?发现
? ? ? ? ? ? ? ? ? ?</div>
? ? ? ? ? ? ? ?</div>
? ? ? ? ? ? ? ?<divid="wode"class="ufl footer_width"onclick="open5();">
? ? ? ? ? ? ? ? ? ?<div id=""class="fa fa-user center uf footer_icon sc-text-tab">

? ? ? ? ? ? ? ? ? ?</div>
? ? ? ? ? ? ? ? ? ?<divid=""class=" text center">
? ? ? ? ? ? ? ? ? ? ? ?我的
? ? ? ? ? ? ? ? ? ?</div>
? ? ? ? ? ? ? ?</div>
? ? ? ? ? </div>


二、JS代码部分

1.加载tab选项卡相关页面?#25226;?#39033;卡代码
vartitHeight = $('#header').offset().height + $('#tabview').offset().height;
? ? ? ? ? appcan.frame.open({
? ? ? ? ? ? ? ?id : "content",
? ? ? ? ? ? ? ?url : [{
? ? ? ? ? ? ? ? ? ?"inPageName" :"早知道",
? ? ? ? ? ? ? ? ? ?"inUrl" :"content_1.html",
? ? ? ? ? ? ? ?}, {
? ? ? ? ? ? ? ? ? ?"inPageName" :"同城活动",
? ? ? ? ? ? ? ? ? ?"inUrl" :'content_two.html',
? ? ? ? ? ? ? ?}, {
? ? ? ? ? ? ? ? ? ?"inPageName" :"**?#32032;?quot;,
? ? ? ? ? ? ? ? ? ?"inUrl" :"content_2.html",
? ? ? ? ? ? ? ?}, {
? ? ? ? ? ? ? ? ? ?"inPageName" :"时尚",
? ? ? ? ? ? ? ? ? ?"inUrl" :"content_3.html",
? ? ? ? ? ? ? ?}, {
? ? ? ? ? ? ? ? ? ?"inPageName" :"找对象",
? ? ? ? ? ? ? ? ? ?"inUrl" :"content_4.html",
? ? ? ? ? ? ? ?}],
? ? ? ? ? ? ? ?top : titHeight,
? ? ? ? ? ? ? ?left : 0,
? ? ? ? ? ? ? ?index : 0,
? ? ? ? ? ? ? ?change : function(err, res) {
? ? ? ? ? ? ? ? ? tabview.moveTo(res.multiPopSelectedIndex);
? ? ? ? ? ? ? ?}
? ? ? ? ? });
? ? ? window.onorientationchange = window.onresize = function() {
? ? ? ? ? ? ? appcan.frame.resize("content", 0, titHeight);
? ? ? ? ? }
? ? ? });
var tabview = appcan.tab({
? ? ? ? ? selector : "#tabview",
? ? ? ? ? hasIcon : false,
? ? ? ? ? ?hasAnim : false,
? ? ? ? ? hasLabel : true,
? ? ? ? ? hasBadge : false,
? ? ? ? ? data : [{
? ? ? ? ? ? ? ?label : "早知道"
? ? ? ? ? }, {
? ? ? ? ? ? ? ?label : "同城活动"
? ? ? ? ? }, {
? ? ? ? ? ? ? ?label : "**?#32032;?quot;
? ? ? ? ? }, {
? ? ? ? ? ? ? label : "时尚"
? ? ? ? ? }, {
? ? ? ? ? ? ? ?label : "找对象",
? ? ? ? ? ? ? ?"icon" :"fa-weixin",
? ? ? ? ? ? ? ?badge : 1
? ? ? });
? ? ? tabview.on("click", function(obj, index) {
? ? ? ? ? appcan.window.selectMultiPopover("content", index);
? ? ? })


“社区”模块??

界面效果图:


一、UI部分

1. ?修改community.html标题内容为:“社区”



2. 在community.html页面底部添加tab选项卡代码
<!-- footer开始?-->
? ? ? ? ? <div id="footer" style="background-color:#FFFFFF">
? ? ? ? ? ? ? ?<divid="jinxuan"class="ufl footer_width ">
? ? ? ? ? ? ? ? ? ?<div id=""class="fa fa-star center uf footer_icon sc-text-tab" >

? ? ? ? ? ? ? ? ? ?</div>
? ? ? ? ? ? ? ? ? ?<divid=""class=" text center sc-text-tab">
? ? ? ? ? ? ? ? ? ? ? ?精选
? ? ? ? ? ? ? ? ? ?</div>
? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ?<divid="shequ"class="ufl footer_width"onclick="open2();">
? ? ? ? ? ? ? ? ? ?<div id=""class="fa fa-weixin center uf footer_icon footer_checked">

? ? ? ? ? ? ? ? ? ?</div>
? ? ? ? ? ? ? ? ? ?<divid=""class=" text1 center footer_checked">
? ? ? ? ? ? ? ? ? ? ? ?社区
? ? ? ? ? ? ? ? ? ?</div>
? ? ? ? ? ? ? ?</div>
? ? ? ? ? ? ? ?<divid="zhuanti"class="ufl footer_width">

? ? ? ? ? ? ? ? ? ?<div id=""class="fa fa-camera center uf footer_icon sc-text-tab">
? ? ? ? ? ? ? ? ? ?</div>
? ? ? ? ? ? ? ? ? ?<divid=""class="center">

? ? ? ? ? ? ? ? ? ?</div>
? ? ? ? ? ? ? ?</div>
? ? ? ? ? ? ? ?<divid="faxian"class="ufl footer_width"onclick="open4();">
? ? ? ? ? ? ? ? ? ?<div id=""class="fa fa-link center uf footer_icon sc-text-tab">

? ? ? ? ? ? ? ? ? ?</div>
? ? ? ? ? ? ? ? ? ?<divid=""class=" text center">
? ? ? ? ? ? ? ? ? ? ? ?发现
? ? ? ? ? ? ? ? ? ?</div>
? ? ? ? ? ? ? ?</div>
? ? ? ? ? ? ? ?<divid="wode"class="ufl footer_width">
? ? ? ? ? ? ? ? ? ?<div id=""class="fa fa-user center uf footer_icon sc-text-tab">

? ? ? ? ? ? ? ? ? ?</div>
? ? ? ? ? ? ? ? ? ?<divid=""class=" text center">
? ? ? ? ? ? ? ? ? ? ? ?我的
? ? ? ? ? ? ? ? ? ?</div>
? ? ? ? ? ? ? ?</div>
? ? ? ? ? </div>
? ? ? ? ? <!-- footer结束?-->


二、JS代码部分

1. 打开社区的浮动窗口代码




原文及下载快看这里:http://bbs.appcan.cn/forum.php?mod=viewthread&tid=43943





最佳答案
评论( 相关
后面还有条评论,点击查看>>
平特肖公式网论坛