原创微信小程序实现上拉加载数据、下拉刷新、分页功能

这节主要是实例讲解，怎样实现上拉加载数据、下拉刷新、分页等功能，首先编写样式，代码如下：

<view class="shop-list" wx:for="{{shopList}}" wx:key="id">
  <view class="thumb">
    <image src="{{item.img}}" />
  </view>
  <view class="info">
    <text class="title">{{item.id}}. {{item.name}}</text>
    <text>电话：{{item.phone}}</text>
    <text>地址：{{item.address}}</text>
    <text>营业时间：{{item.hours}}</text>
  </view>
</view>

<view class="hlb" hidden="{{bottomMsg}}">
  我是有底线的哦 ^_^
</view>

.shop-list{
  display: flex;
  padding: 15rpx;
  border: 1rpx solid #efefef;
  margin: 15rpx;
  border-radius: 10rpx;
  box-shadow: 1rpx 1rpx 15rpx #dddddd;
}
.thumb image{
  width: 210rpx;
  height: 210rpx;
  display: block;
  margin-right: 15rpx;
  border-radius: 8rpx;
  border: 1rpx solid #fafafa;
}
.info{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  font-size: 24rpx;
}
.info .title{
  font-weight: bold;
}

.hlb{text-align: center; padding: 10rpx 0; font-size: 24rpx; color: #999999;}

其次在页面配置文件.json中配置下拉刷新，代码如下：

{
  "usingComponents": {},
  "navigationBarBackgroundColor": "#F89600",
  "navigationBarTextStyle": "white",
  "onReachBottomDistance": 20,
  "enablePullDownRefresh": true,
  "backgroundColor": "#efefef",
  "backgroundTextStyle": "dark"
}

最后我们实现功能，代码如下：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    query:{},
    shopList:[],
    total:0,
    page:1,
    pageSize:8,
    isLoading:false,
    bottomMsg:true
  },

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

  getShopList(cb){
    this.setData({ isLoading: true })
    wx.showLoading({ title: '数据加载中...' })
    wx.request({
      url: 'https://www.hilo8.com/life',
      method:'GET',
      data:{
        _page: this.data.page,
        _limit: this.data.pageSize
      },
      success:(res)=>{
        //console.log(res);
        this.setData({
          shopList: [...this.data.shopList, ...res.data.data],
          total: res.data.total
        })
      },
      complete:()=>{
        wx.hideLoading()
        this.setData({ isLoading:false })
        cb && cb()
      }
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    wx.setNavigationBarTitle({ title: this.data.query.title })
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
    this.setData({
      shopList:[],
      page:1,
      isLoading:false,
      bottomMsg:true
    })
    this.getShopList(()=>{
      wx.stopPullDownRefresh()
    })
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    if(this.data.page*this.data.pageSize>=this.data.total){
      this.setData({ bottomMsg: false })
      return;
    }
    if(this.data.isLoading) return;
    this.setData({
      page: this.data.page + 1
    })
    this.getShopList()
  }
})

参数说明：

query: 接收上个页面传过来的参数

shopList: 数据列表

total: 总数据

page: 当前页数

pageSize: 每页显示数量

isLoading: 截流操作，如在加载数据时不能再发请求加载下一页数据

bottomMsg: 显示已无数据状态，即没有下一页数据了

完成后效果图如下：