通过apicloud实现的混合开发App的Demo

技术：html+css+js+apicloud封装的api
 

概述

本Demo主要基本的HTML+CSS+JS实现的混合App，通过第三方平台apicloud主要页面有首页资讯+商城，目前数据都是静态的，未模拟动态数据,css布局运用的是flex布局。

详细

代码下载：http://www.demodashi.com/demo/14987.html

Demo属于入门实例，未做深入研究，关于Apiclou中的api未做详细介绍。主要是通过HTML+CSS+JS所实现的App。主要实现的功能有底部导航+路由的封装+首页不同状态的布局显示+轮播的多种效果+全屏遮罩+规格选择。

?
1
一、项目目录

0.jpg

?
1
二、演示效果

代码不复杂，适合入门的同学们学习，如果想更深入的了解，多看看官方提供的文档，例子很详细。

?
1
三、程序实现具体步骤

首页滑动轮播+布局 home.html

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
<!DOCTYPE HTML>
<html>
 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>首页</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" href="../../css/swiper.min.css">
    <link rel="stylesheet" href="../home/statc/css/home.css">
    <script src="../../script/nutil.js"></script>
</head>
<body>
    <header>
      <div class="title">有钱有矿</div>
      <div style="flex:1"></div>
      <div>图标</div>
    </header>
    <div class="content">
      <!-- 导航 -->
      <div class="lists-paraent">
        <ul class="lists">
          <li class="list">
            <a href="#" class="hongbao" onclick="push_navigator('RedEnvelopes','../RedEnvelopes/RedEnvelopes.html')">
              <img class='list-img' src="../../image/hongbao.png" alt="">
              <span class="list-text">红包</span>
            </a>
          </li>
          <li class="list">
            <img class='list-img' src="../../image/dianying.png" alt="">
            <span class="list-text">影视大全</span>
          </li>
          <li class="list">
            <img class='list-img' src="../../image/xiaoshuo.png" alt="">
            <span class="list-text">小说</span>
          </li>
          <li class="list">
            <img class='list-img' src="../../image/zixun.png" alt="">
            <span class="list-text">资讯</span>
          </li>
          <li class="list">
            <a href="#" class="hongbao">
              <img class='list-img' src="../../image/hongbao.png" alt="">
              <span class="list-text">红包</span>
            </a>
          </li>
          <li class="list">
            <img class='list-img' src="../../image/dianying.png" alt="">
            <span class="list-text">影视大全</span>
          </li>
          <li class="list">
            <img class='list-img' src="../../image/xiaoshuo.png" alt="">
            <span class="list-text">小说</span>
          </li>
          <li class="list">
            <img class='list-img' src="../../image/zixun.png" alt="">
            <span class="list-text">资讯</span>
          </li>
        </ul>
      </div>
      <!-- 导航 -->
      <!-- 资讯推荐一条模版一 左右布局-->
      <div class="info" onclick="push_navigator('newContent','../home/content.html')">
          <div class="info-text">
            <div class="info-title">宝宝被小鸡逗得忍不住大笑，这笑声太有感染力了,根本停不下来</div>
            <div class="info-load">鹦鹉娱乐</div>
          </div>
          <div style="flex:1"></div>
          <div class="info-img">
            <img src="../../image/7.png" alt="">
          </div>
      </div>
      <!-- 资讯推荐一条模版一 左右布局-->
      <!-- 资讯推荐一条模版二 上下布局-->
      <div class="infos">
          <div class="infos-text">宝宝被小鸡逗得忍不住大笑，这笑声太有感染力了,根本停不下来</div>
          <div class="infos-img">
              <img src="../../image/8.jpg" alt="">
              <img src="../../image/9.jpg" alt="">
              <img src="../../image/10.jpg" alt="">
          </div>
          <div class="info-load">鹦鹉娱乐</div>
      </div>
      <!-- 资讯推荐一条模版二 上下布局-->
      <!-- 滑动轮播 模版三 -->
      <div class="swiper-container">
       <div class="swiper-wrapper">
           <div class="swiper-slide">
             <img src="../../image/5.jpg" alt="">
             <div class="swiper-load">快手</div>
           </div>
           <div class="swiper-slide">
             <img src="../../image/6.jpg" alt="">
             <div class="swiper-load">快手</div>
           </div>
           <div class="swiper-slide">
             <img src="../../image/5.jpg" alt="">
             <div class="swiper-load">快手</div>
           </div>
           <div class="swiper-slide">
             <img src="../../image/6.jpg" alt="">
             <div class="swiper-load">快手</div>
           </div>
           <div class="swiper-slide">
             <img src="../../image/5.jpg" alt="">
             <div class="swiper-load">快手</div>
           </div>
           <div class="swiper-slide">
             <img src="../../image/6.jpg" alt="">
             <div class="swiper-load">快手</div>
           </div>
       </div>
     </div>
     <div class="infos">
         <div class="infos-text">宝宝被小鸡逗得忍不住大笑，这笑声太有感染力了,根本停不下来</div>
         <div class="infos-img">
             <img src="../../image/1.jpg" alt="">
             <img src="../../image/2.jpg" alt="">
             <img src="../../image/3.jpg" alt="">
         </div>
         <div class="info-load">鹦鹉娱乐</div>
     </div>
     <div class="info" onclick="push_navigator('newContent','../news/content.html')">
         <div class="info-text">
           <div class="info-title">宝宝被小鸡逗得忍不住大笑，这笑声太有感染力了,根本停不下来</div>
           <div class="info-load">鹦鹉娱乐</div>
         </div>
         <div style="flex:1"></div>
         <div class="info-img">
           <img src="../../image/7.png" alt="">
         </div>
     </div>
     <div class="infos">
         <div class="infos-text">宝宝被小鸡逗得忍不住大笑，这笑声太有感染力了,根本停不下来</div>
         <div class="infos-img">
             <img src="../../image/4.jpg" alt="">
             <img src="../../image/5.jpg" alt="">
             <img src="../../image/6.jpg" alt="">
         </div>
         <div class="info-load">鹦鹉娱乐</div>
     </div>
     <div class="infos">
         <div class="infos-text">宝宝被小鸡逗得忍不住大笑，这笑声太有感染力了,根本停不下来</div>
         <div class="infos-img">
             <img src="../../image/3.jpg" alt="">
             <img src="../../image/2.jpg" alt="">
             <img src="../../image/4.jpg" alt="">
         </div>
         <div class="info-load">鹦鹉娱乐</div>
     </div>
      <!-- 滑动轮播 模版三-->
      <!-- 广告  -->
      <div class="widsue">
        <div class="widsue-title">快乐小游戏：赚钱神奇</div>
        <div class="widsue-img">
          <img src="../../image/12.jpg" alt="">
        </div>
        <div class="widsue-load">(广告)快乐小游戏：赚钱神奇</div>
      </div>
      <!-- 广告 -->
    </div>
</body>
<script src="../../script/swiper.min.js"></script>
<script src="../../script/api.js"></script>
<script src="../home/statc/js/home.js"></script>
<script>
// $api.addEvt($api.dom('.hongbao'), 'click', function(){
//   console.log('333')
// });
</script>
</html>

首页滑动轮播+布局 home.css

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
.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不同代码无法提交。

学习学无止境，一起共勉。

代码下载：http://www.demodashi.com/demo/14987.html

注：本文著作权归作者，由demo大师发表，拒绝转载，转载需要作者授权

posted on   demo例子集  阅读(2237)  评论(0)  编辑  收藏  举报

（评论功能已被禁用）
编辑推荐：
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行：
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源！
· 周边上新：园子的第一款马克杯温暖上架

导航

< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5
点击右上角即可分享
微信分享提示
AI IDE Trae