您现在的位置:爱折腾>> web>>正文内容

swiper插件关于上下手势拉动动态加载数据的小结

        匆忙过去了一个月的时间。华商的APP及web项目终于基本做好了,闲来做个笔记小结一下。


        一, ajax传数据及模板总结

                (为了便于后台人员的开发,写的网页不再是停留在静态页面层次了,而是需要写json模板,通过 tomcat以及后台服务器,演示数据调用结果。)
       


        二,关于swiper插件的上下手势滑动的判断


     

     1.以往,通过 js动态给页面中添加一个div层或者还有嵌套的几层div,通常会用如下这样的形式:
 

  1. result+=[  
  2.                          "<div class=\"boxlist\">" 
  3.                                  + "<div class=\"boxlisttext\">标题:<b>"+array.name+"<b></div>" 
  4.                                  +"<div class=\"boxlisttext\">链接:<b>+array.url+"<b></div>"  
  5.                          +"</div>" 
  6.                  ].join(" "); 



        可是在=在写一些斜杠的时候容易出现问题。

        现在写一些动态添加的模板会使用另一个方法:先引入 jsrender.min.js,然后在页面中写一个模板和json数据,例如
       
 

  1. <!----模板--->  
  2.        <script type="text/x-jsrender" id="adddata-template">//这里的id是自己定义的,需要与后面的传入数据容器名称对应即可  
  3.                 <div class="swiper-slide">         
  4.                         <div class="list" onclick="window.location.href='detail.html'">  
  5.                                 <div class="lefttext">  
  6.                                         <h1>{{>title}}</h1> //这里传入的是参数模型,用两个双括号加一个大于号加参数表示  
  7.                                         <p>{{>wordcnt}}</p>  
  8.                                 </div>  
  9.                                 <div class="rightpic"><img src={{>url}}></div>  
  10.                         </div>  
  11.                 </div>  
  12.         </script>  
  13.          
  14. <!----json数据--->  
  15.         
  16.         //定义json数据,假设这个json给它命名为dynamic.json,这样写后,后台人员自然就知道怎么建表了。  
  17.                         var dataInt={         
  18.  
  19.                                 "pics":[  
  20.  
  21.                                         {  
  22.                                                 "title""全部刷新的标题1",  
  23.                                                 "src":  "images/banner_b.jpg" 
  24.                                         },  
  25.                                         {  
  26.                                                 "title""全部刷新的标题1",  
  27.                                                 "src":  "images/banner_a.jpg" 
  28.                                         }  
  29.  
  30.                                 ],  
  31.  
  32.                                 "datas"        :                              
  33.                             [  
  34.                                 {  
  35.                                     "title""全部刷新的标题1",  
  36.                                     "wordcnt":  "全部刷新的文字内容",  
  37.                                     "url""images/pic_a.jpg" 
  38.                                 },  
  39.                                 {  
  40.                                     "title""全部刷新的标题2",  
  41.                                     "wordcnt":  "全部刷新的文字内容",  
  42.                                     "url""images/pic_a.jpg" 
  43.                                 },  
  44.                                 {  
  45.                                     "title""全部刷新的标题3",  
  46.                                     "wordcnt":  "全部刷新的文字内容",  
  47.                                     "url""images/pic_a.jpg" 
  48.                                 }  
  49.                             
  50.                             ],  
  51.  
  52.                             'items':[  
  53.  
  54.                                     {  
  55.                                     "title""尾部新增的标题1",  
  56.                                     "wordcnt":  "尾部新增的文字内容",  
  57.                                     "url""images/pic_b.jpg" 
  58.                                 },  
  59.                                 {  
  60.                                     "title""尾部新增的标题2",  
  61.                                     "wordcnt":  "尾部新增的文字内容",  
  62.                                     "url""images/pic_b.jpg" 
  63.                                 },  
  64.                                 {  
  65.                                     "title""尾部新增的标题3",  
  66.                                     "wordcnt":  "尾部新增的文字内容",  
  67.                                     "url""images/pic_b.jpg" 
  68.                                 },  
  69.                                 {  
  70.                                     "title""尾部新增的标题4",  
  71.                                     "wordcnt":  "尾部新增的文字内容",  
  72.                                     "url""images/pic_b.jpg" 
  73.                                 },  
  74.                                 {  
  75.                                     "title""尾部新增的标题5",  
  76.                                     "wordcnt":  "尾部新增的文字内容",  
  77.                                     "url""images/pic_b.jpg" 
  78.                                 },  
  79.                                 {  
  80.                                     "title""尾部新增的标题6",  
  81.                                     "wordcnt":  "尾部新增的文字内容",  
  82.                                     "url""images/pic_b.jpg" 
  83.                                 }  
  84.                             ]  
  85.  
  86.                         }  



        而ajax传数据可以这样写:
 

  1. $.ajax({  
  2.                 type: "POST",  
  3.                 url: "json/dynamic.json"//这里注意路径问题,json文件的路径是以HTML页面作为基准的,而不是以当前这个js文件,这是初学时容易犯的错误  
  4.                 success: function(response){ //这里的 response参数作为 ajax请求成功后传回来的数据  
  5.                         /*************加载数据********************************/ 
  6.                         $.each(response.links,function(index,value){//循环遍历  
  7.  
  8.                                 var html=$('#adddata-template').render(value);  
  9.                                 mySwiper.appendSlide(html);  
  10.  
  11.                         })  
  12.                 }  
  13.  
  14.         });  

       


2.遇到的第二个难点是手势滑动上下的判断。

        虽然可以用简单的方法判断页面是否到底不以及到顶部,如:
 

  1. window.onload=function(){  
  2.          
  3.         var scrollTop = $(this).scrollTop();  
  4.         var scrollHeight = $(document).height();  
  5.         var windowHeight = $(this).height();  
  6.          
  7.         if(scrollTop + windowHeight == scrollHeight){  
  8.                 alert("到达底部了")  
  9.         }  
  10.  
  11.         else if(scrollTop==0){  
  12.                 alert('滑到页面顶部')  
  13.         }  
  14.          
  15. }  

        问题是这样的体验相对于原生 js的那种手势滑动,有一个橡皮筋的那种拉动回弹效果就没有了。
        于是决定借用swiper插件了,这个插件还是很不错的!

        首先按照官网示例上的写法写好HTML页面结构后,一定不要忘了页面中与swiper-wrapper平级的 <div class="swiper-scrollbar"></div>不能缺少。

        然后js写法上,例如:

        

  1. var mySwiper = new Swiper('.all-container', {  
  2.  
  3.                         scrollbar: '.swiper-scrollbar',  
  4.                         direction: 'vertical',  
  5.                         slidesPerView: 'auto',  
  6.                         mousewheelControl: true,  
  7.                         freeMode: true,  
  8.                         onTouchEnd: function(swiper){  
  9.  
  10.                                 if(swiper.translate>60){ //判断下拉刷新  
  11.                                         $('.uptipsgray').addClass('visible');//下拉刷新的div显示  
  12.                                         loadNewData();//加载更多数据  
  13.                                 }  
  14.                                 else if(swiper.translate<-40){ //判断上拉加载新数据  
  15.  
  16.                                         if(mySwiper.isEnd){  
  17.                                                 //mySwiper.isEnd这个函数用来判断时候滑动到底部,但是不能单独的用这个来写,还需要在外层写一个swiper.translate<-40,是为了需要先判断是手势是上拉还是下拉,否则可能造成了点击页面,还没设计到上下拉就执行里面的函数了,这里的40也不                  是固定的,只是为了先判断手势方向,再判断是否到底  
  18.                                                  
  19.                                                 $('.tipsgray').addClass('visible');  
  20.                                                 loadHistoryData();  
  21.                                         }  
  22.                                          
  23.  
  24.                                 }  
  25.                         }  
  26.                 });  
  27.         


以上就是关于最近项目难点的总结,没有完整的代码,只把关键点列了出来,欢迎讨论,也希望带给你们项目中一些帮助。

相关文章