您的位置:首页> 日志> 前端技术 正文
DTOP

利用Swiper实现手机webapp一例

stillfish | 2017年03月31日 |

>>收藏本文 已有 1条评论

3月份端州区政府手机版遇到了一些比较特殊的需求,譬如触屏焦点图、触屏Tab切换等等的功能。

 

使用了各种实现方法,发现Swiper是最轻便的一个JS库:

Swiper常用于移动端网站的内容触摸滑动

Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端。

Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。

Swiper开源、免费、稳定、使用简单、功能强大,是架构移动终端网站的重要选择。

Swiper无需加载任何公共库(如jquery)即可运行,这保证了Swiper的轻量和运行速度。

Swiper也可以在加载了公共库的环境下安全的运行,如jQuery, Zepto, jQuery Mobile等!

下面介绍一下使用方法:

1、首先加载插件,需要用到的文件有swiper.min.js和swiper.min.css文件。 在header前加入

  1. <li><script src="{PE.SiteConfig.SkinPath/}phone/js/swiper.min.js"></script></li> 
  2. <li><link rel="stylesheet" href="{PE.SiteConfig.SkinPath/}phone/swiper.min.css"></li> 

2、内容结构

  1. <div class="infoBox J_slideMod"> 
  2.         <div class="tabs"> 
  3.             <a class="on">资讯</a> 
  4.             <a>政务</a> 
  5.             <a>互动</a> 
  6.             <a class="workbtn" data-url="http://wsbs.zqdz.gov.cn/portal/index.action">办事</a> 
  7.         </div> 
  8.  
  9.         <div id="tabs-container" class="swiper-container"> 
  10.  
  11.             <div class="swiper-wrapper"> 
  12.                      
  13.                 <div class="swiper-slide"> 
  14.                       
  15.                     <div class="content-slide"> 
  16.                        <!-- 焦点图 S --> 
  17.             <div id="slideBox" class="slideBox"> 
  18.                 <div class="swiper-wrapper"> 
  19.                 {PE.Label id="手机类_通用信息列表" bindStyle="首页焦点图" imageWidth="460" imageHeight="235" outputQty="5" titleLength="26" nodes="128" picExist="true" models="1" listOrderType="20" /} 
  20.                 </div> 
  21.                 <div class="pagination"></div> 
  22.             </div> 
  23.             <!-- 焦点图 E --> 
  24.                         <ul class="infoList infoListA"> 
  25.                             {PE.Label id="手机类_头条图文信息列表" bindStyle="自适应" nodes="128" outputQty="15" bindModel="1" topicNum="4" titleLength="100" contentLength="30" topicTitleLength="36" topicContentLength="90" usePage="false" listOrderType="3" picExist="false" /} 
  26.                         </ul> 
  27.                         <div class="cateBtn cateBtnA">查看更多&gt;&gt;</div> 
  28.                     </div> 
  29.                 </div> 
  30.                 <div class="swiper-slide"> 
  31.                     <div class="content-slide"> 
  32.                         <ul class="infoList infoListB"> 
  33.                             {PE.Label id="手机类_头条图文信息列表" bindStyle="自适应" nodes="150" outputQty="15" bindModel="1" topicNum="4" titleLength="100" contentLength="70" usePage="false" listOrderType="3" picExist="false" topicTitleLength="36" topicContentLength="90" /} 
  34.                         </ul> 
  35.                         <div class="cateBtn cateBtnB">查看更多&gt;&gt;</div> 
  36.                     </div> 
  37.                 </div> 
  38.                 <div class="swiper-slide"> 
  39.                     <div class="content-slide"> 
  40.                         <ul class="infoList"> 
  41.                             {PE.Label id="手机类_头条图文信息列表" bindStyle="自适应" nodes="166" outputQty="15" bindModel="1" topicNum="4" titleLength="100" contentLength="70" usePage="false" listOrderType="3" picExist="false" topicTitleLength="36" topicContentLength="90" /} 
  42.                         </ul> 
  43.                         <div class="cateBtn cateBtnC">查看更多&gt;&gt;</div> 
  44.                     </div> 
  45.                 </div> 
  46.                 <div class="swiper-slide"> 
  47.                     <div class="content-slide"> 
  48.                         <div class="onlinebtn"> 
  49.                             尊敬的用户,您可以通过点击下面的“网办大厅”按钮进入到网上办事大厅! 
  50.                             <div class="btn" data-url="http://wsbs.zqdz.gov.cn/portal/index.action">网上办事大厅</div> 
  51.                         </div> 
  52.                     </div> 
  53.                 </div> 
  54.             </div> 
  55.  
  56.         </div> 
  57.     </div> 

3、Swiper相关切换代码:

  1. <script type="text/javascript"
  2. $(function() { 
  3.   var mySwiper2 = new Swiper('#slideBox',{ 
  4.       autoplay:5000, 
  5.       visibilityFullFit : true
  6.       loop:true
  7.       pagination : '.pagination'
  8.   }); 
  9.    
  10.   var tabsSwiper = new Swiper('#tabs-container',{ 
  11.     speed:500, 
  12.     onSlideChangeStart: function(){ 
  13.       $(".tabs .on").removeClass('on'
  14.       $(".tabs a").eq(tabsSwiper.activeIndex).addClass('on')   
  15.     } 
  16.   }) 
  17.   $(".tabs a").on('touchstart mousedown',function(e){ 
  18.     e.preventDefault() 
  19.     $(".tabs .on").removeClass('on'
  20.     $(this).addClass('on'
  21.     tabsSwiper.slideTo( $(this).index() ) 
  22.   }) 
  23.   $(".tabs a").click(function(e){ 
  24.     e.preventDefault() 
  25.   }) 
  26. }); 
  27. </script>