原生移动上拉下啦刷新加载更d

浅浅的花香味﹌ 2022-06-03 02:25 43阅读 0赞

#     #

html 代码效果预览

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 
         
          
        
         
        
         
         
               color:  #FFF;      border:  0 px;      border-radius:  5 px;      float:  right;      margin:  1.7 em  0 px; } </ style > </ head > < body >  < div   id = "wrapper"   style = "height:50em;" >    < ul   id = "gameList" >    </ ul > </ div >    < script   type = "text/javascript" > var  upDown = function ( opt ) {      debugger      opt  =  opt  ||  { } ;      var  ele  =  opt . ele  ||  'container' ;      var  up  =  opt . up  ||  function ( ) { } ;      var  down  =  opt . down  ||  function  ( )  { } ;      /*上拉刷新和下拉加载*/      document . getElementById ( ele ) . onscroll = function ( ) {          var  scrollTop  = this . scrollTop ;  //滚动条距离顶部的高度   ——窗口滚动距离          var  ziHeight  =  this . scrollHeight ;    //当前页面的总高度                            var  fuHeight  =  this . clientHeight ;            //当前可视的页面高度          if ( scrollTop  +  fuHeight  +50  >=  ziHeight )  {   //距离顶部+当前高度 >=文档总高度 即代表滑动到底部               up ( ) ;          }  else  if ( scrollTop  <=  50 )  {   //滚动条距离顶部的高度小于等于0

标签：

*  [原生js][js]
 *  [移动端][Link 1]
 *  [上拉加载下拉刷][Link 2]

[js]: http://www.qdfuns.com/notes/tags/id/%E5%8E%9F%E7%94%9Fjs.html
[Link 1]: http://www.qdfuns.com/notes/tags/id/%E7%A7%BB%E5%8A%A8%E7%AB%AF.html
[Link 2]: http://www.qdfuns.com/notes/tags/id/%E4%B8%8A%E6%8B%89%E5%8A%A0%E8%BD%BD%E4%B8%8B%E6%8B%89%E5%88%B7%E6%96%B0.html