移动端滑动分页详解（手写插件+亲测demo）

最新推荐文章于 2024-06-06 09:45:56 发布

ITzhongzi

最新推荐文章于 2024-06-06 09:45:56 发布

阅读量3.6k

点赞数 1

分类专栏：前端学习笔记

本文链接：https://blog.csdn.net/ITzhongzi/article/details/76498421

版权

前端学习笔记专栏收录该内容

306 篇文章 7 订阅

订阅专栏

这是本人尝试手写的一个基于jq uery 的插件

测试结构代码如下：（index.html）

    <!DOCTYPE html> 
  
    < 
   html 
   lang= 
   "en"> 
  
    < 
   head> 
  
    < 
   meta 
   charset= 
   "UTF-8"> 
  
    < 
   meta 
   name= 
   "viewport" 
   content= 
   "width=device-width, initial-scale=1.0"> 
  
    < 
   meta 
   http-equiv= 
   "X-UA-Compatible" 
   content= 
   "ie=edge"> 
  
    < 
   title>移动端的分页功能</ 
   title> 
  
    < 
   style> 
  
   * { 
  
   padding: 
    0; 
  
   margin: 
    0; 
  
    } 
  
   html, 
   body { 
  
   width: 
    100 
   %; 
  
   height: 
    100 
   %; 
  
   /* overflow: hidden; */ 
  
    } 
  
   .box { 
  
   width: 
    100 
   %; 
  
   height: 
    100 
   %; 
  
   display: 
    flex; 
  
   flex-direction: 
    column; 
  
    } 
  
   .box 
   p { 
  
   height: 
    40 
   px; 
  
   line-height: 
    40 
   px; 
  
   text-align: 
    center; 
  
    } 
  
   .box 
   .container { 
  
   flex-grow: 
    1; 
  
    } 
  
   .box 
   .container 
   ul { 
  
    } 
  
   .box 
   .container 
   ul 
   li { 
  
   height: 
    40 
   px; 
  
   line-height: 
    40 
   px; 
  
   border-top: 
    1 
   px 
   solid 
   #ccc; 
  
   border-bottom: 
    1 
   px 
   solid 
   #ccc; 
  
   text-align: 
    center; 
  
    } 
  
    </ 
   style> 
  
    </ 
   head> 
  
    < 
   body> 
  
    < 
   div 
   class= 
   "box"> 
  
    < 
   p>下面是分页功能测试</ 
   p> 
  
    < 
   div 
   class= 
   "container"> 
  
    < 
   ul> 
  
    < 
   li>1</ 
   li> 
  
    < 
   li>2</ 
   li> 
  
    < 
   li>3</ 
   li> 
  
    < 
   li>4</ 
   li> 
  
    < 
   li>5</ 
   li> 
  
    < 
   li>6</ 
   li> 
  
    < 
   li>7</ 
   li> 
  
    < 
   li>8</ 
   li> 
  
    < 
   li>9</ 
   li> 
  
    < 
   li>10</ 
   li> 
  
    < 
   li>11</ 
   li> 
  
    < 
   li>12</ 
   li> 
  
    < 
   li>13</ 
   li> 
  
    < 
   li>14</ 
   li> 
  
    < 
   li>15</ 
   li> 
  
    < 
   li>16</ 
   li> 
  
    < 
   li>17</ 
   li> 
  
    < 
   li>18</ 
   li> 
  
    < 
   li>19</ 
   li> 
  
    < 
   li>20</ 
   li> 
  
    < 
   li>21</ 
   li> 
  
    < 
   li>22</ 
   li> 
  
    </ 
   ul> 
  
    </ 
   div> 
  
    </ 
   div> 
  
    < 
   script 
   src= 
   "./jquery.js"></ 
   script> 
  
    < 
   script 
   src= 
   "./pagging.js"></ 
   script> 
  
    < 
   script> 
  
   var obj 
    = { 
  
    template: 
   '<p>你好</p>', 
  
    el: 
   '.container ul', 
  
    refreshLength: 
   50, 
    //距离底部多高刷新页面 
  
    } 
  
   Pagging(obj); 
  
    </ 
   script> 
  
    </ 
   body> 
  
    </ 
   html>

js（插件）代码如下：

    ( 
   function( 
   $){ 
  
   var pageHeight; 
  
   var scrollHeight; 
  
   var scrollTop; 
  
   var refresh; 
    //距离底部多高刷新 
  
   var $ulEle; 
    //ul 增加 dom 的容器 
  
   var 
    Pagging 
   = 
   function( 
   obj){ 
  
   //判断是用函数创建的还是用new创建的。这样我们就可以通过MaskShare("dom") 或 new MaskShare("dom")来使用这个插件了 
  
   if( 
   !( 
   this 
   instanceof Pagging)){ 
  
   // var defaultObj = { 
  
   // template: '<p>你好</p>', 
  
   // el: '.container ul', 
  
   // refreshLength: 50, //距离底部多高刷新页面 
  
   // } 
  
   return 
   new 
   Pagging(obj); 
  
    } 
  
   //初始化 
  
   this. 
   _init(obj); 
  
    } 
  
   Pagging.prototype 
    = { 
  
   _init: 
   function( 
   obj){ 
  
   this. 
   extend(obj) 
  
   //初始化数据 
  
   this. 
   initData(obj); 
  
   //绑定事件 
  
   this. 
   bindEvent( 
   this.dataObj); 
  
    }, 
  
   initData: 
   function( 
   obj){ 
  
    refresh 
   = obj.refreshLength; 
  
    }, 
  
   extend: 
   function( 
   obj){ 
  
   var dataObj 
    = {}; 
  
   for(key 
   in obj){ 
  
    dataObj[key] 
   = obj[key] 
  
    } 
  
   this.dataObj 
    = dataObj; 
  
    }, 
  
   bindEvent: 
   function( 
   obj){ 
  
   var that 
    = 
   this; 
  
   $( 
   '.container'). 
   on( 
   'touchstart', 
   function(){ 
  
    pageHeight 
   = 
    $(window). 
   height(); 
  
    scrollHeight 
   = 
    $(document). 
   height(); 
  
    scrollTop 
   = 
   $(window). 
   scrollTop(); 
  
   console. 
   log( 
   'start') 
  
    }); 
  
   $( 
   '.container'). 
   on( 
   'touchmove', 
   function(){ 
  
   if(scrollHeight 
    > pageHeight){ 
  
   if(scrollHeight 
    - scrollTop 
   - pageHeight 
    < refresh){ 
  
   //加载数据 
  
    that. 
   drawPage(obj) 
  
    } 
  
    } 
  
    }); 
  
   $( 
   '.container'). 
   on( 
   'touchend', 
   function(){ 
  
   console. 
   log( 
   'end') 
  
    }); 
  
    }, 
  
   drawPage: 
   function( 
   obj){ 
  
   console. 
   log( 
   JSON. 
   stringify(obj)) 
  
   var $dom 
    = 
   $(obj.el); 
  
    $dom. 
   append(obj.template); 
  
    } 
  
    } 
  
   //暴露全局变量 
  
    window.Pagging 
   = Pagging 
  
    })($)

教程：在引入了这个jquery和这个js 文件之后，使用方式：

 
   var obj 
    = { 
  
    template: 
   '<p>你好</p>', 
    //要渲染的页面结构 
  
    el: 
   '.container ul', 
    //页面荣区，盛放要被渲染的几条狗 
  
    refreshLength: 
   50, 
    //距离底部多高刷新页面 
  
    } 
  
   new 
   Pagging(obj);

这样就ok了，欢迎各个大神一起讨论学习

ITzhongzi

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
移动端滑动分页详解（手写插件+亲测demo）

这是本人尝试手写的一个基于jq uery 的插件测试结构代码如下：（index.html）html lang="en">head>meta charset="UTF-8">meta name="viewport"content="width=device-width, initial-scale=1.0">meta http-equiv="X-UA-
复制链接

扫一扫