开放原子开发者工作坊

近日，AppCan社区又有新的干货内容分享，社区昵称为appcan_y的开发者分享了一个仿口袋购物的App源码。

效果图：



一、UI部分

1、修改index.html标题内容为：“口袋购物”

2、在index.html页面内添加底部tab选项卡代码：

 

1.  <!--content结束-->
2.  <div id="footer"style="height:3em"class="footer_color">
3.     <div id="tuijian"class="ufl footer_width footer_top">
5.                <div id="" class="fa fa-heart center uf footer_iconfooter_checked">
7.                </div>
8.                <div id=""class="center">
9.                    推荐
10.                </div>
11.            </div>
12.            <div id="zhuanti"class="ufl footer_width footer_top">
13.                <div id="" class="fa fa-bookmark center uf footer_iconsc-text-tab">
14.                   
15.                </div>
16.                <div id=""class="center">
17.                    专题
18.                </div>
19.            </div>
20.            <div id="wode"class="ufl footer_width footer_top">
21.                <div id="" class="fa fa-user center uf footer_iconsc-text-tab">
22.                   
23.                </div>
24.                <div id=""class="center">
25.                    我的
26.                </div>
27.            </div>
28.  </div>

复制代码

 

 

效果如下：

二、JS代码部分

1、加载底部tab选项卡《专题》部分代码

效果如下：

2、加载底部tab选项卡《我的》部分代码

效果如下