Beispielcode zum Erzielen eines Seiten-Pullup-Ladeeffekts

Das Projekt ist endlich abgeschlossen und ich habe viel daraus gelernt. Die Seite hat einen Pull-up-Loading-Effekt. Ich habe es heute geklärt.

Die Implementierungsidee des Pull-Up-Ladens ist eigentlich sehr einfach:

1 Das mobile Endgerät löst das Touchmove-Ereignis (Pull-Up) aus

2 ob das letzte Element unten angezeigt wurde

3. Wenn es angezeigt wird, fügen Sie js-Elemente am Ende der Seite hinzu

Ideenkarte:

Als nächstes beginnen Sie mit dem Schreiben des Stils:

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;
}

HTML-Struktur:

<section id="item">
	<ul id="personkit_article_ul">
		<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>
		<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>
		<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>
		<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>
		<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>
		<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 wird mit Zepto implementiert. js-Bibliothek:

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

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

Dieser Effekt dient zur Simulation des mobilen Endgeräts und kann beim Testen von Google Chrome – Mail – Inspect-Element verwendet werden. Klicken Sie auf den eingekreisten Bereich oben, um den Effekt zu sehen

Das obige ist der detaillierte Inhalt vonBeispielcode zum Erzielen eines Seiten-Pullup-Ladeeffekts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!