AppCan移动开发:仿19楼生活资讯类APP源码分享
来源:互联网 发布:windows 10 ie 在哪 编辑:程序博客网 时间:2024/04/30 00:56
近日,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选项卡相关页面及选项卡代码
vartitHeight = $('#header').offset().height + $('#tabview').offset().height;
appcan.frame.open({
id : "content",
url : [{
"inPageName" :"早知道",
"inUrl" :"content_1.html",
}, {
"inPageName" :"同城活动",
"inUrl" :'content_two.html',
}, {
"inPageName" :"**八卦",
"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 : "**八卦"
}, {
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
- AppCan移动开发:仿19楼生活资讯类APP源码分享
- AppCan移动开发:仿口袋购物APP源码
- AppCan 移动应用开发项目源码分享:嗡嗡旅游App开发
- AppCan认为,移动APP开发不是技术活
- appcan框架开发app
- AppCan移动开发技巧:3步走,获取移动APP签名信息
- AppCan移动开发技巧:3步走,获取移动APP签名信息
- appCan-移动开发之Android
- AppCan--移动应用开发平台
- Appcan移动快速开发平台
- AppCan开源案例:移动电商 APP《海外购》超详源码
- AppCan开源案例:移动电商 APP《海外购》超详源码
- 众创时代,从APP开发者到移动创客全解析 --AppCan移动创业技术分享会(北京站)
- 【AppCan 开发者第二期】剑霄: 单打独斗的移动App开发勇士
- AppCan 移动应用开发第一课 AppCan UI 详讲
- appcan开发经验分享,超实用
- 简单易学的移动开发appcan
- AppCan移动开发平台的新业态思维
- android eclipse代码混淆
- LAMP第二部分apache配置2(访问日志切割 and 配置静态文件缓存 and配置防盗链)
- 关于项目导入别人jar包引发的问题总结
- PC-Lint与CC++代码质量
- sda must have a gpt disk label sda必须有gpt硬盘标签
- AppCan移动开发:仿19楼生活资讯类APP源码分享
- 程序员的发展
- 使用gitshell把工程推送到git
- __attribute__ 你知多少?
- VC6 Tips 001: Reload last workspace at startup
- socket编程的select模型
- Winform客户端到Java服务端的图片展示和上传
- Android 应用测试总结
- myeclipse中修改文件打开方式