Demo属于入门实例，未做深入研究，关于Apiclou中的api未做详细介绍。主要是通过HTML+CSS+JS所实现的App。主要实现的功能有底部导航+路由的封装+首页不同状态的布局显示+轮播的多种效果+全屏遮罩+规格选择。
html;gutter:true
一、项目目录</p>
<pre><code>
;gutter:true
二、演示效果
代码不复杂，适合入门的同学们学习，如果想更深入的了解，多看看官方提供的文档，例子很详细。
html;gutter:true
三、程序实现具体步骤</p>
<pre><code>
首页滑动轮播+布局 home.html
;gutter:true
首页
有钱有矿
图标
红包
影视大全
小说
资讯
红包
影视大全
小说
资讯
宝宝被小鸡逗得忍不住大笑，这笑声太有感染力了,根本停不下来
鹦鹉娱乐
宝宝被小鸡逗得忍不住大笑，这笑声太有感染力了,根本停不下来
鹦鹉娱乐
快手
快手
快手
快手
快手
快手
宝宝被小鸡逗得忍不住大笑，这笑声太有感染力了,根本停不下来
鹦鹉娱乐
宝宝被小鸡逗得忍不住大笑，这笑声太有感染力了,根本停不下来
鹦鹉娱乐
宝宝被小鸡逗得忍不住大笑，这笑声太有感染力了,根本停不下来
鹦鹉娱乐
宝宝被小鸡逗得忍不住大笑，这笑声太有感染力了,根本停不下来
鹦鹉娱乐
快乐小游戏：赚钱神奇
(广告)快乐小游戏：赚钱神奇
// $api.addEvt($api.dom(‘.hongbao’), ‘click’, function(){
// console.log(‘333’)
// });
首页滑动轮播+布局 home.css
css;gutter:true
.title{
font-size: 20px;
}
.content{
margin-top: 40px;
box-sizing: border-box;
}
/*list state*/
.lists-paraent{
border-bottom:4px solid #f5f5f5;
padding-bottom: 14px;
}
.lists-paraent .lists{
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
}
.lists-paraent .list{
width: 16.66%;
justify-content: center;
align-items: center;
text-align: center;
padding-top: 14px;
}
.lists-paraent .list-img{
width: 28px;
height: 28px;
}
.lists-paraent .list-text{
font-size: 12px;
display: block;
color: #808080;
}
/*list*/
/*info模版一*/
.info{
display: flex;
padding: 13px 13px 10px 13px;
box-sizing: border-box;
overflow: hidden;
border-bottom: 1px solid #f5f5f5;
/*display: none;*/
}
.info-text .info-title{
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
height: 50px;
line-height: 25px;
color: #333;
font-size: 16px;
padding-right: 13px;
box-sizing: border-box;
}
.info-text .info-load{
font-size: 12px;
color: #808080;
padding-top: 8px;
}
.info-img img{
width: 120px;
height: 80px;
}
/*info模版一*/
/*info模版二*/
.infos{
padding: 13px 13px 10px 13px;
box-sizing: border-box;
overflow: hidden;
border-bottom: 1px solid #f5f5f5;
}
.infos-text{
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
height: 50px;
line-height: 25px;
color: #333;
font-size: 16px;
padding-bottom: 10px;
}
.infos-img{
width: 100%;
}
.infos-img img{
width: 32.3%;
height: 80px;
}
.infos .info-load{
font-size: 12px;
color: #808080;
padding-top: 8px;
}
/*info模版二*/
.swiper-container{
padding: 13px 13px 10px 13px;
box-sizing: border-box;
overflow: hidden;
border-bottom: 1px solid #f5f5f5;
}
.swiper-slide{
height: 200px;
}
.swiper-slide img{
width: 100%;
height: 90%;
}
.swiper-load{
font-size: 12px;
color: #808080;
padding-top: 3px;
}
/*widsue 广告*/
.widsue{
padding: 13px 13px 10px 13px;
box-sizing: border-box;
overflow: hidden;
border-bottom: 1px solid #f5f5f5;
}
.widsue .widsue-title{
color: #333;
font-size: 16px;
padding-bottom: 10px;
}
.widsue-img img{
width: 100%;
height: 200px;
}
.widsue-load{
font-size: 12px;
color: #808080;
padding-top: 8px;
}
/*widsue 广告*/
其他注意点：
如果你想直接在自己的编辑器运行，请记得修改config.xml中的id=”换成自己的”，否则id不同代码无法提交。
学习学无止境，一起共勉。
注：本文著作权归作者，由demo大师发表，拒绝转载，转载需要作者授权
Original: https://www.cnblogs.com/demodashi/p/10503435.html
Author: demo例子集
Title: 通过apicloud实现的混合开发App的Demo
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/551597/
转载文章受原作者版权保护。转载请注明原作者出处！