jquery weui 上拉加载,下拉刷新,问题解答。

jquery weui 上拉加载,下拉刷新,问题解答。

Scroll Down

jquery weui 上拉加载,下拉刷新,以及问题解答。

以下是上拉加载,和下拉刷新的全部代码,直接复制就能使用,记得把api换成项目真实地址,亲测有效,大神勿喷
html

  <div class="container" id="container" style="height:100%; margin-top: -50px;overflow:auto;  z-index: 1  ">
    <!--下拉刷新-->
    <div class="weui-pull-to-refresh__layer" style=" ">
      <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="contentList" id="contentList">
      <!--内容展示区域-->
    </div>
    <div class="weui-loadmore">
      <i class="weui-loading"></i>
      <span class="weui-loadmore__tips">正在加载</span>
    </div>
  </div>

这样写的前提确保是html和body的height100%,也就是屏幕的高度,实际出来的效果底下会缺一块,再加上下面这句代码就没有问题了。

$(function(){
  $("#container").css("padding-bottom","50px");
})

不能使用高度,高度会有问题,使用padding就行了

js

  var page = 1;
  var limit = 10;
  var loading = false; //状态标记
  loadComplaints(limit,page);
  //=========================下拉刷新
  $("#container").pullToRefresh(function() {
    page = 1;
    $("#contentList").html("");
    loadComplaints(10,1);
    $("#container").pullToRefreshDone(); // 重置下拉刷新
  });
  // $("#container").pullToRefresh().on("pull-to-refresh", function () {
    
  // });

  $("#container").infinite().on("infinite", function () {
    if (loading) return;
    loading = true;
    page++; //页数
    $('.weui-loadmore').show();
    loadComplaints(limit,page);
  });

  function loadComplaints(limit,page) {
    $.showLoading();
    request({
      type: "GET",
      url: url,//换上自己的api
      data: "",
      isAsync: true,
      success: function(res) {
        $.hideLoading();
        loading = false;
        if(res.status) {
          if(res.data.length > 0 && res.data != null) {
            creatTemplate(res.data);//这里是将数据遍历并创建dom添加到容器中
          }else {
            if(page == 1) {
              console.log("没有数据");
              $(".container").hide();
              $("#noContent").show();
            }else {
              var endHtml = '<div class="weui-cells__title textCenter" >没有更多内容了哟~~</div>';
              $("#contentList").append(endHtml);
              loading = true;
            }
          }
        }else{
          $.toptip(res.msg, 'error');
          var endHtml = '<div class="weui-cells__title textCenter" >没有更多内容了哟~~</div>';
          $("#contentList").append(endHtml);
          loading = true;
        }
        $(".weui-loadmore").hide();
      },
      error: function(err) {
        $.toptip("发生未知错误", 'error');
        $.hideLoading();  
        loading = false;
      }
    })
  }

欢迎小伙伴们评论