この記事では主に、Iscool プルダウン更新機能 (推奨) を実装する方法を紹介します。編集者はこれが非常に良いものだと思ったので、皆さんの参考として今から共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。
簡単なプルダウン更新実装方法
cssスタイル:
*{ margin: 0px; padding: 0px; } #wrapper{ width: 100%; height: 150px; border: 1px solid red; overflow: hidden; position: absolute; } #shua{ text-align: center; }
HTMLコード
<p id="wrapper"> <p> <p id="shua">刷新</p> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> </p> </p>
jsコードを書く前に、jQueryプラグインとiscrollプラグインを導入する必要があります
そのときのjsコードは以下の通りです。
//给内容添加滚动事件 var a=new IScroll("#wrapper",{ scrollbars:true, mouseWheel:true, interactiveScrollbars:true, // scrollX:true, // freeScroll:true, probeType:2, }) //让文字先隐藏 $("#shua").hide(); var x=0; a.on("scroll",function(){ if(x==0){ if(this.y>40){ $("#shua").show(); $("#shua").text("松开手进行刷新") x=1; } a.on("scrollEnd",function(){ if(x==1){ $("#shua").text("正在刷新") setTimeout(shuju,1000) x=2; } }) var z=0; function shuju(){ if(x==2){ $("#shua").hide(); $("ul>li:nth-child(1)").before($("<li></li>").text("数据"+ z++)) a.refresh() x=0; } } } }) </script>
これで、簡単なプルダウンの更新が完了しました。 !
関連する推奨事項:
dropload.js プラグインのプルダウン リフレッシュとプルアップ ロード方法
サンプルでは、より多くのプルダウン リフレッシュ データをロードする mui プルアップのカプセル化プロセスを詳しく説明します
WeChatアプレットリストのプルダウン・リフレッシュとプルアップ・ロード実装方法の解析
以上がIscoolプルダウンリフレッシュ実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。