Iscoolプルダウンリフレッシュ実装方法

この記事では主に、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>
      </p><p>
        </p><p>刷新</p>
        

          
• 1
          
• 2
          
• 3
          
• 4
          
• 5
          
• 6
          
• 7
          
• 8
          
• 9
          
• 10
        

           

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($("

").text("数据"+ z++))             a.refresh()             x=0;           }                        }       }              })     

これで、簡単なプルダウンの更新が完了しました。 ！

関連する推奨事項:

dropload.js プラグインのプルダウン リフレッシュとプルアップ ロード方法

サンプルでは、​​より多くのプルダウン リフレッシュ データをロードする mui プルアップのカプセル化プロセスを詳しく説明します

WeChatアプレットリストのプルダウン・リフレッシュとプルアップ・ロード実装方法の解析

以上がIscoolプルダウンリフレッシュ実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。