公告列表
公告列表
收藏
评论

小程序应用官方上下拉刷新示例

在实际开发中，我在wxml文件布局中，主要有数据遍历列表，是否有记录提示，加载提示。

layer-top 和 layer-bottom 块补充主要是因为小程序整个页面刷新端是page，因此layer-top，layer-bottom补充才有利于上拉加载减少误差。

pageLoading 主要用于页面加载数据缓慢，出现假数据的情况，设置新的数据多少会出现延时的，当延时再重新切换正常数据，用户视觉体验会有些不好。

<view class="g-doc" hidden = "{{pageLoading}}">
        <view class="g-hd">
            tab
        </view>
        <view class="g-bd">
            <!-- layer-top 等同于 g-hd的高度 -->
            <view class="layer-top"></view>  
            <block wx:if = "{{dataList.length}}">
                <block wx:for = "{{dataList}}" wx:key = "*this">
                    {{item}}
                </block>
                <!-- 加载条 start -->
                 <view class="weui-loadmore" hidden="{{!loadBar.Loading}}">
                    <view class="weui-loading"></view>
                    <view class="weui-loadmore__tips">加载中</view>
                  </view>
                   
                  <view class="weui-loadmore" hidden="{{loadBar.Loading}}">
                    <view class="weui-loadmore__tips" hidden='{{!loadBar.more}}'>加载更多</view>
                    <view class="weui-loadmore__tips" hidden='{{loadBar.more}}'>没有更多了</view>
                  </view>
                <!-- 加载条 end -->
            </block>
            <block wx:else>
                暂无记录
            </block>
            <!-- layer-top 等同于 g-ft 的高度 -->
 
            <view class="layer-bottom"></view>
 
        </view>
 
        <view class="g-ft">
            add
        </view>
    </view>

在JSON中

{

"enablePullDownRefresh": true,

"backgroundTextStyle": "dark",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "单页",

"navigationBarTextStyle": "black",

}

在js中



var onLoadNumber = 1;
Page({
  data: {
    pageLoading: true,
    page: 1,
    pageSize: 20,
    dataList: [
      // {}
    ],
    loadBar:{
      Loading:false,
      more:true
    }
  },
  onLoad: function (options) {
    var self = this;
 
    try {
 
 
 
      self.dataLayer();
 
      setTimeout(()=>{
        self.setData({
          pageLoading: false
        })
      },300)
 
    } catch (e) {
  
    }
 
 
  },
  /**
  *下拉刷新
  **/
  onPullDownRefresh: function () {
    var self = this;
    self.setData({
      page: 1
    });
    self.dataLayer(function (isData) {
      setTimeout(() => {
        wx.stopPullDownRefresh() //停止下拉刷新
      }, 800);
    });
  },
  dataLayer: function (callback) {
 
    var self = this;
 
    var url = "api/api.do";
 
 
    var page = self.data.page;
    var pageSize = self.data.pageSize;
 
    let data = {
      page: page,
      pageSize: pageSize,
    }
 
 
    var loadBar = self.data.loadBar || {};
    loadBar.Loading = true;   // 加载中
    self.setData({
      loadBar: loadBar
    });
 
     
    wx.request({
      url: url,
      data: data,
      header: {
        'content-type': 'application/json' // 默认值
      },
      method: "GET",
      success: function (res) {
        
        loadBar.Loading = false;  // 加载完毕
        self.setData({
          loadBar: loadBar
        })
 
 
        let data = res.data;   // { object :{ rows:[] ,records:0}}
        let obj = data.object || {};
        let rows = obj.rows || [];
 
        let isData = (pageSize >= rows.length) ? true : false;
        var records = obj.records;
 

if (!rows.length){

if(page> 1){

isData = false;

}

}

        if (!!callback) {
          callback(isData);
        }
 
        if (page > 1) {
          let dataList = self.data.dataList;
          let newRows = dataList.concat(rows);
          loadBar.more = !(records <= newRows.length);   // 判断是否还有数据
          self.setData({
            dataList: newRows,
            loadBar: loadBar 
          });
 
        } else {
 
          loadBar.more = !(records <= rows.length);  // 判断是否还有数据
          self.setData({
            dataList: rows,
            loadBar: loadBar
          });
        }
      },
      fail: function (err) {
        if (!!callback) {
          callback();
        }
      }
    });
 
 
  },
  /**
  上拉加载
 
  **/
  onReachBottom: function () {
 
    var self = this;
 
    var page = self.data.page;
    self.setData({
      page: ++page
    })
 
    let pageSize = self.data.pageSize;
    let dataList = self.data.dataList;
    if (dataList.length < pageSize) {
      console.log("数量太小，不需要上拉")
      return false;
    }
 
    self.dataLayer(function (isData) {
      if (!isData) {
        // 没有数据应减回去
        self.setData({
          page: --page
        })
      }
    });
 
 
  },
});



css 可参考，毕竟业务开发中css还是有所差异的

.g-doc, page {
  width: 100%;
  height: 100%;
  position: relative;
}
 
.g-doc {
  width: 100%;
  height: 100%;
  position: relative;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  flex-flow: column;
}
 
.layer-top {
  height: 50px;
}
 
.layer-bottom {
  height: 50px;
}
 
.g-bd {
  width: 100%;
  background: transparent;
  -webkit-box-flex: 1;
  flex: 1;
  margin-bottom: 50px;
}
 
.g-ft {
  width: 100%;
  bottom: 0;
  position: fixed;
}

例图：


最后一次编辑于  2019-05-14
收藏

1 个评论

请 登录 后发表内容