ホームページ ウェブフロントエンド jsチュートリアル ページプルアップ読み込み効果を実現するサンプルコード

ページプルアップ読み込み効果を実現するサンプルコード

Jun 24, 2017 pm 02:09 PM
負荷 成し遂げる 効果 動く

プロジェクトはついに終わりました。WebApp を作成し、そこから多くのことを学びました。今日はそれを整理しました。

プルアップ読み込みの実装アイデアは実際には非常に簡単です:

1. モバイル端末が touchmove イベント (プルアップ) をトリガーします

2. 最後の要素が下部に表示されたかどうかを判断します

3.表示される場合、js はページの最後にある

Think マップに要素を追加します:

次に、スタイルの記述を開始します:

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 構造:

<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 は以下を使用して実装されます。 zepto.js ライブラリ:

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

;(function(){
	$(&#39;#personkit_article_ul&#39;).on(&#39;touchmove&#39;,function(){
		//判断最后一个元素是否在底部之上
		if( $(&#39;.pin&#39;).eq($(&#39;.pin&#39;).length-1).offset().top-$(window).scrollTop() &lt; $(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&gt;0;j--){
			var li=document.createElement(&#39;li&#39;);
			li.className=&quot;pin&quot;;
			li.innerHTML=&#39;&lt;div class=&quot;personkit-article__img&quot;&gt;&lt;img src=&quot;../public/imgs/4.png&quot; alt=&quot;&quot;&gt;&lt;/div&gt;&lt;div class=&quot;personkit-article__info&quot;&gt;&lt;h3 class=&quot;personkit-article__title&quot;&gt;关于保健的一本书&lt;/h3&gt;&lt;p&gt;原来保健是这样的啊原来保健是这样的啊原来保健是这样的啊原来保健是这样的啊&lt;/p&gt;&lt;/div&gt;&#39;;
			pinNew.appendChild(li);
		}
		$(&#39;#personkit_article_ul&#39;)[0].appendChild(pinNew);
	}
})();
ログイン後にコピー

このエフェクトは、テスト時にモバイル端末をシミュレートします。 、Google Chrome - メール - 検査要素を使用できます。上記をクリックしてください。場所をマークすることで効果を確認できます

以上がページプルアップ読み込み効果を実現するサンプルコードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

ユーザーがまれに発生する不具合: Samsung Watch スマートウォッチで突然白い画面の問題が発生する ユーザーがまれに発生する不具合: Samsung Watch スマートウォッチで突然白い画面の問題が発生する Apr 03, 2024 am 08:13 AM

ユーザーがまれに発生する不具合: Samsung Watch スマートウォッチで突然白い画面の問題が発生する

Huawei 携帯電話にデュアル WeChat ログインを実装するにはどうすればよいですか? Huawei 携帯電話にデュアル WeChat ログインを実装するにはどうすればよいですか? Mar 24, 2024 am 11:27 AM

Huawei 携帯電話にデュアル WeChat ログインを実装するにはどうすればよいですか?

6000mAhのシリコンマイナスバッテリー! Xiaomi 15Proアップグレードが再びリーク 6000mAhのシリコンマイナスバッテリー! Xiaomi 15Proアップグレードが再びリーク Jul 24, 2024 pm 12:45 PM

6000mAhのシリコンマイナスバッテリー! Xiaomi 15Proアップグレードが再びリーク

九州風神アサシン4Sラジエターレビュー 空冷「アサシンマスター」スタイル 九州風神アサシン4Sラジエターレビュー 空冷「アサシンマスター」スタイル Mar 28, 2024 am 11:11 AM

九州風神アサシン4Sラジエターレビュー 空冷「アサシンマスター」スタイル

春の絶妙な光と影のアート、Haqu H2 は費用対効果の高い選択肢です 春の絶妙な光と影のアート、Haqu H2 は費用対効果の高い選択肢です Apr 17, 2024 pm 05:07 PM

春の絶妙な光と影のアート、Haqu H2 は費用対効果の高い選択肢です

Huawei携帯電話にWeChatクローン機能を実装する方法 Huawei携帯電話にWeChatクローン機能を実装する方法 Mar 24, 2024 pm 06:03 PM

Huawei携帯電話にWeChatクローン機能を実装する方法

Huntkey MX750P フルモジュール電源レビュー: 750W の集中プラチナ強度 Huntkey MX750P フルモジュール電源レビュー: 750W の集中プラチナ強度 Mar 28, 2024 pm 03:20 PM

Huntkey MX750P フルモジュール電源レビュー: 750W の集中プラチナ強度

PHP プログラミング ガイド: フィボナッチ数列を実装する方法 PHP プログラミング ガイド: フィボナッチ数列を実装する方法 Mar 20, 2024 pm 04:54 PM

PHP プログラミング ガイド: フィボナッチ数列を実装する方法

See all articles