Example code to achieve page pull-up loading effect-JS Tutorial-php.cn

Bishe is finally over. I made a webApp and learned a lot from it. The page has a pull-up loading effect. I sorted it out today.

The implementation idea of pull-up loading is actually very simple:

1. The mobile terminal triggers the touchmove event (pull-up)

2. Determine whether the last element has appeared at the bottom

3. If it appears, js adds elements to the end of the page

Idea map:

Then start writing the style:

html,body{ margin: 0px; width: 100%; height: 100%; } li{ list-style: none; } #personkit_article_ul{ width: 100%; position: relative; -webkit-padding-start:0; -webkit-margin-before:0; -webkit-margin-after:0; } .pin{ /*width: 100%;*/ height: 90px; background-color: #eee; padding: 6px 8px; position: relative; border-bottom: 1px solid #fff; } .personkit-article__img{ width: 116px; height: 90px; } .personkit-article__img img{ width: 100%; height: 100%; } .personkit-article__info{ position: absolute; left: 130px; top: 0px; padding: 0px 8px; } .personkit-article__title{ line-height: 0px; } /*多行文本溢出作省略处理*/ .personkit-article__info p{ display: -webkit-box; overflow: hidden; text-overflow:ellipsis; -webkit-line-clamp:3; -webkit-box-orient:vertical; } .bottom-line{ text-align: center; background-color: #eee; }

Copy after login

html structure:

     
  关于保健的一本书
 原来保健是这样的啊原来保健是这样的啊原来保健是这样的啊原来保健是这样的啊
 
 
    
  关于保健的一本书
 原来保健是这样的啊原来保健是这样的啊原来保健是这样的啊原来保健是这样的啊
 
 
    
  关于保健的一本书
 原来保健是这样的啊原来保健是这样的啊原来保健是这样的啊原来保健是这样的啊
 
 
    
  关于保健的一本书
 原来保健是这样的啊原来保健是这样的啊原来保健是这样的啊原来保健是这样的啊
 
 
    
  关于保健的一本书
 原来保健是这样的啊原来保健是这样的啊原来保健是这样的啊原来保健是这样的啊
 
 
    
  关于保健的一本书
 原来保健是这样的啊原来保健是这样的啊原来保健是这样的啊原来保健是这样的啊

Copy after login

js is implemented using zepto.js library:

;(function(){ $('#personkit_article_ul').on('touchmove',function(){ //判断最后一个元素是否在底部之上 if( $('.pin').eq($('.pin').length-1).offset().top-$(window).scrollTop() < $(window).height() ){ $('.bottom-line').css('display','block').text('正在刷新...'); checkPull(); } }); //添加元素方法 function checkPull(){ var pinNew; pinNew=document.createDocumentFragment(); //每次添加5条内容 for(var j=5;j>0;j--){ var li=document.createElement('li'); li.className="pin"; li.innerHTML='
关于保健的一本书
原来保健是这样的啊原来保健是这样的啊原来保健是这样的啊原来保健是这样的啊
'; pinNew.appendChild(li); } $('#personkit_article_ul')[0].appendChild(pinNew); } })();

Copy after login

This effect is to simulate the mobile terminal. You can use Google Chrome - Mail during testing ——Inspect the element, click on the circled area above to see the effect

The above is the detailed content of Example code to achieve page pull-up loading effect. For more information, please follow other related articles on the PHP Chinese website!