小程序下拉刷新，加载更多数据，移动端分页

文章目录

参考：https://juejin.cn/post/7222855604406796346

页面结构图

一般页面就4个结构：最外滚动层、数据展示层、暂无数据层、没有更多数据层。

如图：

WXML页面代码

html 复制代码

<scroll-view style="height:{{containerHeight}}rpx" scroll-y lower-threshold="100rpx" bindscrolltolower="onReachBottom">
    <block wx:for='{{records}}' wx:key='this'>
      <view class='list-item' data-index='{{index}}'>
        <!-- 内容 -->
        <view>{{item.name}}</view>
      </view>
    </block>
    <block wx:if="{{isLoadEnd&&records.length==0}}">
      <view class="center-both" style="height:100%">
        <view class="col-center">
            <view class="empty-hint">未搜索到单位~</view>
        </view>
      </view>
    </block>
    <view wx:if="{{isLoadComplete&&records.length!=0}}" class="nomore">没有更多数据了</view>
</scroll-view>

js代码

javascript 复制代码

var app = getApp()

Page({
  /**
   * 页面的初始数据
   */
  data: {
    //容器高度 = 屏幕高度 - 顶部高度 - 底部高度 - 28padding - 搜索栏
    // containerHeight: app.globalData.screenHeight - app.globalData.topHeight - app.globalData.bottomHeight - 28 - 96,
    containerHeight:1300,
    pageSize: 20, //请求一页的数据数目
    currentPage: 1, //当前页数
    currentparameter: '', //要搜索的数据
    isLoadEnd: false, //是否单次加载结束
    isLoadComplete: false, //是否获取到全部数据
    value: "",
    records: [], //数据
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.startPage('')
  },

  getData(searchKey) {
    wx.showNavigationBarLoading() // 在标题栏中显示加载
    // 制作假数据
    this.fakeRequest()
  },

  fakeRequest() {
    let that = this
    setTimeout(() => {
      let ressult = []
      --app.globalData.retryCount
      for (let i = 1; i <= 20; ++i) {
        if (i > 10 && app.globalData.retryCount < 0) {
          break
        }
        ressult.push({
          name: '小明' + i
        })
      }
      //将新数据加进去，通知本次加载结束
      let records = that.data.records
      if (that.data.currentPage == 1) {
        records = ressult
      } else {
        ressult.forEach(element => {
          records.push(element)
        });
      }
      that.setData({
        records: records,
        isLoadEnd: true,
        isLoadComplete: ressult.length < that.data.pageSize
      })
      // 数据成功后，停止下拉刷新
      wx.hideLoading()
      wx.stopPullDownRefresh();
      wx.hideNavigationBarLoading()
    }, 1500);
  },

  //搜索数据
  startPage(searchKey) {
    this.setData({ // 重置数据
      records: [],
      currentPage: 1,
      currentparameter: searchKey,
      isLoadEnd: false,
      isLoadComplete: false,
    })
    app.globalData.retryCount = 2 //测试假数据
    this.getData(searchKey)
  },

  //下一页
  nextPage() {
    this.setData({
        currentPage: ++this.data.currentPage,
        isLoadEnd: false,
    })
    wx.showLoading({
        title: '正在加载..'
    })
    this.getData(this.data.currentparameter)
  },

  //滚动到底部加载
  onReachBottom() {
    //上拉加载中，或者数据加载结束，不应该触发下一页
    if (this.data.isLoadEnd && !this.data.isLoadComplete) {
      this.nextPage()
    }
  },

  onSearch(e) {
    //关键词搜索
    this.startPage(e.detail)
  },
})

wxss代码

css 复制代码

.search {
  height: 96rpx;
}

.empty-hint {
  font-size: 28rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #949494;
  line-height: 40rpx;
  margin-top: 48rpx;
}

.nomore {
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  margin: 28rpx 0 0;
  
  font-size: 26rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #616161;
  line-height: 36rpx;
}

.list-item {
  background: #FFFFFF;
  border-radius: 12rpx;
  margin:  28rpx 32rpx 0;
  padding: 24rpx 32rpx;
  box-sizing: border-box;
}

总结

以上代码只是简单的demo，重点要搞清的是：

页面结构
获取数据的时候标签isLoadEnd、isLoadComplete以及数据数量和pagesize的比较

备注

js代码中有wx.stopPullDownRefresh(); ，这里大概讲一下。

这个API表示的是停止当前页面下拉刷新，因为其他代码懒粘了这里就只讲一下用法。

具体使用：

app.js 中window 中添加："enablePullDownRefresh": true, ；
指定页面的js文件中使用onPullDownRefresh(){} 即可；
需要马上停止，使用wx.stopPullDownRefresh() 。