apicloud apicloud

注册
查看: 5999|回复: 11

[APP开发技巧] 从零开始写图片滑动效果

新手上路

UID:123710

主题:
7
帖子:
41
云币:
337

[APP开发技巧] 从零开始写图片滑动效果

5999 11 | 发表于 2015-7-30 20:20:19 |阅读模式 | |
注:该篇文章是学习IDE页面框架page020的总结。

1. 新建html页面
自动生成的代码如下:
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
  6.     <title>title</title>
  7.     <link rel="stylesheet" type="text/css" href="api.css"/>
  8.     <style>
  9.         body{

  10.         }
  11.     </style>
  12. </head>
  13. <body>

  14. </body>
  15. <script type="text/javascript" src="api.js"></script>
  16. <script type="text/javascript">
  17.     apiready = function(){

  18.     };
  19. </script>
  20. </html>
复制代码

2. 在body中添加slide,swipe_wrap元素以及几张img图片
  1. <div id='slide' class='swipe'>
  2.     <div class='swipe-wrap' id="banner-content">
  3.         <div onclick="" tapmode="">
  4.             <img src="../image/45.png"/>
  5.         </div>
  6.         <div onclick="" tapmode="">
  7.             <img src="../image/46.png"/>

  8.         </div>
  9.         <div onclick="" tapmode="">
  10.             <img src="../image/47.png"/>
  11.         </div>
  12.         <div onclick="" tapmode="">
  13.             <img src="../image/48.png"/>

  14.         </div>
  15.         <div onclick="" tapmode="">
  16.             <img src="../image/49.png"/>

  17.         </div>
  18.         <div onclick="" tapmode="">
  19.             <img src="../image/50.png"/>

  20.         </div>
  21.     </div>
  22. </div>
复制代码
添加完成后,这几张图片肯定是垂直显示,如下图所示:


3. 设置slide,swipe_wrap以及img的css属性
  1.        .swipe {   
  2.             margin: 0 auto;   
  3.             overflow: hidden;   
  4.             position: relative;   
  5.         }   
  6.    
  7.         .swipe-wrap {   
  8.             overflow: hidden;   
  9.             position: relative;   
  10.         }   
  11.    
  12.         .swipe-wrap > div {   
  13.             float: left;   
  14.             width: 100%;   
  15.             position: relative;   
  16.         }   
  17.    
  18.         .swipe-wrap > div {   
  19.             overflow: hidden;   
  20.             position: relative;   
  21.         }   
  22.    
  23.         .swipe-wrap img {   
  24.             width: 100%;   
  25.             height: auto;   
  26.             max-height: 240px;   
  27.             min-height: 132px;   
  28.             min-width: 320px;   
  29.             max-width: 640px;   
  30.         }   
复制代码
发现,设置完css之后,并没有什么变化,除了max-height限制了高度而已。下面一步就是关键的操作。

4. 添加swipe.js以及initSlide()函数
  1. <script type="text/javascript" src="../script/swipe.js"></script>
  2. <script type="text/javascript">
  3.     apiready = function(){
  4.         initSlide();
  5.     };
  6.    
  7.     function initSlide() {   
  8.         var $pointer = $api.byId('pointer');   
  9.         window.mySlide = Swipe(slide, {   
  10.             continuous: true,   
  11.             disableScroll: true,   
  12.             stopPropagation: true,   
  13.         });   
  14.     }   
  15. </script>
复制代码
奇迹出现了,这个时候只显示一张图片了,而且支持左右滑动。下一步添加就是添加页码显示,知道总共有几页,当前显示的是第几页。

5. 添加pointer的div以及css属性
在slide的div中添加下述代码:
  1.     <div id="pointer">   
  2.         <a class="active"></a>   
  3.         <a></a>   
  4.         <a></a>   
  5.         <a></a>   
  6.         <a></a>   
  7.         <a></a>   
  8.         <a></a>   
  9.     </div>   
复制代码
在style中添加下述代码:
  1.         #pointer {   
  2.             position: absolute;   
  3.             bottom: 12px;   
  4.             overflow: hidden;   
  5.             width: 100%;   
  6.             text-align: center;   
  7.         }   
  8.    
  9.         #pointer a {   
  10.             display: inline-block;   
  11.             width: 6px;   
  12.             height: 6px;   
  13.             border-radius: 6px;   
  14.             margin-right: 4px;   
  15.             background-color: #FFFFFF;   
  16.         }   
  17.    
  18.         #pointer a.active {   
  19.             background-color: #999999;   
  20.         }   
复制代码
这个时候图片底部确实有页码了,但是当滑动图片的时候,页码并没有跟着变化啊。

6. 设置Swipe的callback函数
  1.     function initSlide() {   
  2.         var $pointer = $api.byId('pointer');   
  3.         window.mySlide = Swipe(slide, {   
  4.             continuous: true,   
  5.             disableScroll: true,   
  6.             stopPropagation: true,   
  7.             callback: function (index, element) {   
  8.                 console.log();   
  9.                 var $actA = $api.dom($pointer, 'a.active');   
  10.                 $api.removeCls($actA, 'active');   
  11.                 $api.addCls($api.eq($pointer, index + 1), 'active');   
  12.             }   
  13.         });   
  14.     }  
复制代码
到这里,一个完整的图片滑动效果就完成了。最终效果图如下:
   

注:该插件存在几个缺点,导致使用起来有点困难,推荐使用另外一个功能极其强大的插件:Swiper.js。后面会再开贴使用swiper.js重写。

本帖子中包含更多资源    您需要 登录 才可以下载或查看,没有帐号?立即注册

1

查看全部评分

主题:
5
帖子:
14
云币:
36
发表于 2015-10-22 00:03:10 |
5. 添加pointer的div以及css属性
在slide的div中添加下述代码:
    <div id="pointer">   
        <a class="active"></a>   
        <a></a>   
        <a></a>   
        <a></a>   
        <a></a>   
        <a></a>   
        <a></a>   
    </div>   
复制代码



这个我是最不清楚的,不管添加到哪个位置,运行APP时,都会提示我的那个Pointer有问题。我都不知的为什么.slide的div不就是body的第一行代码就是slide的div???

主题:
5
帖子:
14
云币:
36
发表于 2015-10-21 23:38:52 |
请问下,就是:
4. 添加swipe.js以及initSlide()函数
5. 添加pointer的div以及css属性
分别添加到哪个地方呢?也就是,像2. 在body中添加slide,swipe_wrap元素以及几张img图片,能说明放在body中,那这两个是放在body,还是style中呢?本人是初学者,对java这类的东西不是很明白,我就想弄这个来试试,从实践中学习,希望您能回答一下,帮帮我。谢谢哈!!!!

主题:
5
帖子:
14
云币:
36
发表于 2015-10-22 00:21:45 |
我仔细看了,他报错原因主要是因为说  var $pointer = $api.byId('pointer'); 的$api在html文件中没有定义,那该怎么办呢?该如何定义,还是应该如何操作,麻烦您了,指教指教!!!

业余车手

UID:22414

主题:
8
帖子:
815
云币:
12667

版主勋章APICloud粉丝

发表于 2015-10-22 08:32:48 |
chen培华 发表于 2015-10-22 00:21
我仔细看了,他报错原因主要是因为说  var $pointer = $api.byId('pointer'); 的$api在html文件中没有定义 ...

在报错的 html 文件中引入官方的 api.js 即可

主题:
5
帖子:
14
云币:
36
发表于 2015-10-22 22:10:18 |
yyyfx 发表于 2015-10-22 08:32
在报错的 html 文件中引入官方的 api.js 即可

怎样引入呢?嘻嘻,我还不怎么会这方面的,就是不知道该怎么引用,麻烦指导下下》》》谢谢哈

业余车手

UID:22414

主题:
8
帖子:
815
云币:
12667

版主勋章APICloud粉丝

发表于 2015-10-23 08:24:54 |
chen培华 发表于 2015-10-22 22:10
怎样引入呢?嘻嘻,我还不怎么会这方面的,就是不知道该怎么引用,麻烦指导下下》》》谢谢哈
...

如果那个html 在项目的根目录,这样引用就可以了
  1. <script type="text/javascript" src="./script/api.js"></script>
复制代码
如果在 html 文件夹中,这样引用就可以了
  1. <script type="text/javascript" src="../script/api.js"></script>
复制代码
上述 src 中的 . 表示当前目录, .. 表示上一级目录。
当引入不同路径的文件时候,需要根据当前文件相对于目标文件所在目录的层级差异,调整 src 才能保证文件的正确引入。

这些是 HTML & JavaScript 的基础知识,建议自行补完,会减少后续的许多麻烦

主题:
5
帖子:
14
云币:
36
发表于 2015-10-24 14:33:13 |
yyyfx 发表于 2015-10-23 08:24
如果那个html 在项目的根目录,这样引用就可以了
如果在 html 文件夹中,这样引用就可以了
上述 src 中的 ...

恩恩,我按您的说法弄了,APP没有报错,可是还是没能弄成滑动相册,好纠结。坑内是代码的问题,
谢谢你了哈

主题:
0
帖子:
3
云币:
4
发表于 2015-10-25 18:07:21 |
怎样引入呢?嘻嘻,我还不怎么会这方面的,就是不知道该怎么引用,麻烦指导下下》》》谢谢哈

驾校小白

UID:188426

主题:
0
帖子:
1
云币:
12
发表于 2015-11-2 16:50:02 |
楼主能讲下代码的衔接问题吗?
12下一页
您需要登录后才可以回帖 登录 | 立即注册

快速回复 返回顶部 返回列表