小程序之上拉刷新和下拉加载

小程序之上拉刷新和下拉加载

//index.js
const app = getApp()
// 获取数据库
const db = wx.cloud.database()
// 获取集合
const goods_col = db.collection('goods')
// 引入异步操作
import { ml_showLoading, ml_hideLoading,ml_showToast,ml_hideToast } from '../../utils/asyncWX'

Page({
  data: {
    goods:[], // 列表数据
    _page:0,
    hasMore:true, // 是否有更多数据可加载
  },

  onLoad: function() {
    this.loadListData()
  },
  // 加载列表数据
  async loadListData(){
    const LIMIT = 4
    let { _page, goods} = this.data //0
    // 显示加载框
    // wx.showLoading({
    //   title: 'Loading...',
    // })
    // 使用封装的加载框
    // await ml_showLoading()
    await ml_showLoading('加载中')

    let res = await goods_col.limit(LIMIT).skip(_page * LIMIT).get()
    console.log('数据',res);

    // 隐藏加载框
    // wx.hideLoading()
    // 使用封装的加载框
    await ml_hideLoading()
    // 手动关闭停止下拉刷新
    wx.stopPullDownRefresh()
    // 设置data中的数据
    this.setData({
      goods:[...goods, ...res.data],
      _page:++_page, // +1
      // 通过判断每次加载的够不够LIMIT条数据 比如17条数据，每次加载5条，最后加载2条小于5条 就是小于LIMIT,所以不等于LIMIT 就等于false 就不用加载数据了
      hasMore:res.data.length === LIMIT
    })
  },
  // 下拉加载
  onReachBottom(){
    // 没有更多数据的情况（节流判断方法）
    if(!this.data.hasMore){
      wx.showToast({
        title: '没有更多数据了',
        icon:'none'
      })
      return console.log('没有更多数据了');
    }
    console.log('上拉加载');
    this.loadListData(); // 加载更多
  },
  // 下拉刷新
  onPullDownRefresh(){
    // 注意下拉刷新需要修改index.json文件中的配置
    console.log('下拉刷新');
    // 1、重置
    this.setData({
      goods:[],
      _page:0,
      hasMore:true
    })
    // 2、加载最新的数据
    this.loadListData();
  }
})

大致流程：

上拉刷新：

1、先限制请求的条数 为5条 limit（5）
2、钩子函数 onReachBottom（）
3、const LIMIT = 5
4、分页

 let { _page, goods} = this.data //0
 let res = await goods_col.limit(LIMIT).skip(_page * LIMIT).get()
 console.log('数据',res);
 // 设置data中的数据
 this.setData({
      goods:[...goods, ...res.data],
      _page:++_page, // +1
      // 通过判断每次加载的够不够LIMIT条数据 比如17条数据，每次加载5条，最后加载2条小于5条 就是小于LIMIT,所以不等于LIMIT 就等于false 就不用加载数据了
      hasMore:res.data.length === LIMIT
 })

没有更多数据可加载的情况（节流）

1、初始值 hasMore ：true // 判断是否有更多数据
2、请求数据成功之后，就知道有没有更多数据

 // 设置data中的数据
 this.setData({
      // 通过判断每次加载的够不够LIMIT条数据 比如17条数据，每次加载5条，最后加载2条小于5条 就是小于LIMIT,所以不等于LIMIT 就等于false 就不用加载数据了
      hasMore:res.data.length === LIMIT
    })

3、节流

 if(!this.data.hasMore){
      wx.showToast({
        title: '没有更多数据了',
        icon:'none'
      })
      return console.log('没有更多数据了');
    }
    console.log('上拉刷新');
    this.loadListData(); // 加载更多
  },

下拉刷新

1、开启配置 在index.json

 "usingComponents": {},
  "navigationBarBackgroundColor": "#009400",
  "navigationBarTitleText": "首页",
  "enablePullDownRefresh": true,
  "backgroundTextStyle": "dark"

2、 onPullDownRefresh()
注意重置、再次调用 加载数据；

3、手动停止下拉刷新

 // 手动关闭停止下拉刷新
  wx.stopPullDownRefresh()

封装加载框和提示框

/**
 * 显示加载框
 * 
*/
export const ml_showLoading = (title) =>{
  return new Promise((resolve) =>{
    wx.showLoading({
      title:title || 'Loading...',
      success:resolve
    })
  })
}

/**
 * 隐藏加载框
 * 
*/
export const ml_hideLoading = () =>{
  return new Promise((resolve) =>{
    wx.hideLoading({
      success:resolve
    })
  })
}

/**
 * 消息提示框
 * 
*/
export const ml_showToast = (title) =>{
  return new Promise((resolve) =>{
    wx.showToast({
      title: title,
    })
  })
}
/**
 * 消息提示框
 * 
*/
export const ml_hideToast = () =>{
  return new Promise((resolve) =>{
    wx.hideToast({
      success:resolve
    })
  })
}