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

近日，AppCan社区又有新的干货内容分享，社区昵称为bali的开发者分享了一个仿19楼的App源码。

 

这个案例主要有四个界面，包括精选、社区、发现、我的，这里主要跟大家说一下精选和社区的实现方法。

 

“精选”模块  

 

页面效果：

 

  

一、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. 打开社区的浮动窗口代码