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

这篇好文章是转载于：学新通技术网