设为首页 加入收藏

TOP

实现移动端上拉加载效果(二)
2017-10-13 10:49:38 】 浏览:512
Tags:实现 移动 加载 效果
; </div> </li> <li class="pin"> <div class="personkit-article__img"> <img src="../public/imgs/4.png" alt=""> </div> <div class="personkit-article__info"> <h3 class="personkit-article__title">关于保健的一本书</h3> <p>原来保健是这样的啊原来保健是这样的啊原来保健是这样的啊原来保健是这样的啊</p> </div> </li> </ul> <div class="bottom-line"></div> </section>

js是用zepto.js库实现的:

<script src="../public/zepto.js"></script>

;(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='<div class="personkit-article__img"><img src="../public/imgs/4.png" alt=""></div><div class="personkit-article__info"><h3 class="personkit-article__title">关于保健的一本书</h3><p>原来保健是这样的啊原来保健是这样的啊原来保健是这样的啊原来保健是这样的啊</p></div>';
			pinNew.appendChild(li);
		}
		$('#personkit_article_ul')[0].appendChild(pinNew);
	}
})();

这个效果是模拟移动端,测试时可使用谷歌浏览器——右键——审查元素,点击上面已圈点的地方可看到效果

 

首页 上一页 1 2 下一页 尾页 2/2/2
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇修改博客园推荐人数增加W效果 下一篇神奇JavaScript框架---Top5

最新文章

热门文章

Hot 文章

Python

C 语言

C++基础

大数据基础

linux编程基础

C/C++面试题目