JQuery と Weui に基づくプルアップ読み込みとプルダウンリフレッシュ

効果

使用説明書

1. 参照する必要があるファイルは、jquery-1.11.3.min.js、jquery-weui.min.js、jquery-weui.min.css、weui.min.css、およびカスタム スタイル ファイルです。

コード

html

<div class="public-picker-paging">
        <div class="public-picker-search">
            <input type="text" placeholder="搜索" class="picker-search-ipt">
        </div>
        <div id="listwrap" style="height: calc(100% - 14px);overflow:auto;  z-index: 1;margin-top: -30px;">
            <div class="weui-pull-to-refresh__layer" style="padding: 5px;">
                <div class="weui-pull-to-refresh__arrow"></div>
                <div class="weui-pull-to-refresh__preloader"></div>
                <div class="down">下拉刷新</div>
                <div class="up">释放刷新</div>
                <div class="refresh">正在刷新</div>
            </div>
            <div class="public-picker-container weui-form-preview" id="Tolist">

            </div>
            <div class="weui-loadmore" style="padding-bottom:2px;height:20px">
                <i class="weui-loading"></i>
                <span class="weui-loadmore__tips">正在加载</span>
            </div>
        </div>
    </div>

js

 var page = 1;
    var loading = false; //状态标记
    $(function () {
    
    
        loadlist();
    })
    //=========================下拉刷新
    $("#listwrap").pullToRefresh().on("pull-to-refresh", function () {
    
    
        setTimeout(function () {
    
    
            page = 1;
            $("#Tolist").html("");
            loadlist();
            if (loading) loading = false;
            $("#listwrap").pullToRefreshDone(); // 重置下拉刷新
        }, 1500); //模拟延迟
    });
    //============================滚动加载
    $("#listwrap").infinite().on("infinite", function () {
    
    
        if (loading){
    
    
            if ($("#Tolist").find(".weui-cells__title").length != 0) {
    
    
                $('.weui-loadmore').hide(); //隐藏正在加载中
            }
            return   
        }
        loading = true;
        page++; //页数
        $('.weui-loadmore').show();
        setTimeout(function () {
    
    
            loadlist();
            loading = false;
        }, 1000); //模拟延迟
    });

    function loadlist() {
    
    
        var html = "";
        let limit = 10;
        // 模拟请求数据
        let req_data = test_data.slice((page - 1) * limit, page * limit)
        // 请求成功
        if (req_data.length > 0) {
    
    
            // 动态加载数据
            for (var i = 0; i < req_data.length; i++) {
    
    
                html += `<div class="item-container">
                <div class="detail-item">
                    <div class="detail-label">姓名：</div>
                    <div class="detail-con">${
      
      req_data[i].name}</div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">性别：</div>
                    <div class="detail-con">${
      
      req_data[i].sex}</div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">电话号码：</div>
                    <div class="detail-con">${
      
      req_data[i].phone}</div>
                </div>
            </div>`
            }
            $("#Tolist").append(html);

        } else {
    
    
            if ($("#Tolist").find(".weui-cells__title").length == 0) {
    
    
                html += "<div class=\"weui-cells__title\" >已无更多数据</div>";
                $("#Tolist").append(html);
            }
            loading = true;
        }
        $(".weui-loadmore").hide();
    }

CSSカスタムスタイル

.public-picker-paging {
    
    
  position: relative;
  bottom: 0px;
  width: 100%;
  height: 100%;
  touch-action: none;
  z-index: 10;
  overflow: hidden;
  .public-picker-search {
    
    
    height: 44px;
    background-color: rgba(255, 255, 255, 1);
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 999;
    // padding: 5px 0px;
    input {
    
    
      height: 100%;
      width: 100%;
      border: 0px;
      outline: none;
      border-radius: 5px;
      padding: 5px 10px;
      background-color: rgba(245, 245, 245, 1);
      text-align: center;
    }
  }
  #listwrap{
    
    
    position: absolute;
    top: 44px;
    left: 0px;
    width: 100%;
  }
  .public-picker-container {
    
    
    background: #fff;
    // height: 100%;
    .item-container{
    
    
      padding: 5px 15px;
      border-bottom: 1px solid #ddd;
      .detail-item{
    
    
        display: flex;
        margin-bottom: 10px;
        .detail-label{
    
    
          font-size: 14px;
          color: rgba(0, 0, 0,0.65);
        }
        .detail-con{
    
    
          font-size: 14px;
          color: rgba(0, 0, 0,0.85);
        }
      }
    }

  }
  .listwrap{
    
    
    height: calc(100% - 89px);overflow:auto;  z-index: 1; background: #fff;
  }
  .listwrap::-webkit-scrollbar {
    
    
    width: 0;
  }
  .weui-loadmore {
    
    
    height: 35px;
    margin: 0;
    width: 100%;
    background: #fff;
    padding-bottom: 5px;
  }
  .weui-cells__title {
    
    
    text-align: center;
    color: rgba(0, 0, 0, 0.45);
    margin-top: 0;
    margin-bottom: 0;
    height: 42px;
    line-height: 42px;
    font-size: 16px;
  }
}