小程序页面的上拉加载和下拉加载

1、需求：小程序的首页需要添加上拉加载和下拉加载的功能，之前做上拉加载和下拉加载是用的是scroll-view组件，但是感觉首页用scroll-view不是最佳选择，page自带的上拉加载和下拉加载更好用一点，就记录一下

2、解决：

上拉加载：

思路：上拉加载的原理是小程序在页面顶部撑出一块50px的空间，在一定时间后消失，所以在顶部的空间加上样式配置监听方法就好了

首先在首页json里面设置enablePullDownRefresh（还有个onReachBottomDistance属性可以设置拖动时加载区域的高度，默认50）

{ ...   enablePullDownRefresh: true, ... }

在js里面配置onPullDownRefresh方法监听用户下拉动作

// pages/home/home.ts export { } const app = getApp<IAppOption>() Page({   /**    * 页面的初始数据    */   data: {     hotGoodsForm: {       pageNum: 1,       pageSize: 10     },     hotGoodsList: [] as any,     homeLoadStatus: 0   },   getHotGoodsInit(): void {     this.data.hotGoodsForm.pageNum = 1     this.data.hotGoodsForm.pageSize = 10     app.ajax.post('/api/goods/getHotGoods', this.data.hotGoodsForm).then((res: any) => { 　　　 //加载完成停止当前页面下拉刷新       wx.stopPullDownRefresh()       this.setData({         hotGoodsList: res.list,         homeLoadStatus: 0       })     })   },   /**    * 页面相关事件处理函数--监听用户下拉动作    */   onPullDownRefresh() {     this.getHotGoodsInit()   }, })

至于wxml的话，我是直接弄一个loading样式，定位在页面之前，这样下拉的时候直接显示加载中

<view class=home_swiper_loading>   <t-loading theme=spinner size=40rpx loading text=加载中...></t-loading> </view>

  .home_swiper_loading {     width: 100%;     height: 100rpx;     position: absolute;     display: flex;     justify-content: center;     align-items: center;     top: -100rpx;     background-color: #f5f5f5;   }

下拉加载：

思路：下拉加载是滚动到页面底部会触发监听事件，所以让list把page撑开，配置加载样式组件展示状态配置方法就ok了

下拉加载第一步就是要滚动到底部，如果你用的是自定义tabber，可以设置page属性来展示完全页面

page{   height: auto;   padding-bottom: calc(env(safe-area-inset-bottom) + 96rpx); }

然后在最底部加一个展示状态的组件，用于展示加载中，没有更多数据和加载失败这些状态

<load-more list-is-empty={{!hotGoodsList.length}} status={{homeLoadStatus}} bind:retry=getHotGoodsInit />

在js里面配置onReachBottom监听页面上拉触底事件，监听到事件后，处理新的数据

// pages/home/home.ts export { } const app = getApp<IAppOption>() Page({   /**    * 页面的初始数据    */   data: {     hotGoodsForm: {       pageNum: 1,       pageSize: 10     },     hotGoodsList: [] as any,     homeLoadStatus: 0   },   getHotGoodsInit(): void {     this.data.hotGoodsForm.pageNum = 1     this.data.hotGoodsForm.pageSize = 10     app.ajax.post('/api/goods/getHotGoods', this.data.hotGoodsForm).then((res: any) => {       wx.stopPullDownRefresh()       this.setData({         hotGoodsList: res.list,         homeLoadStatus: 0       })     })   },   getHotGoodsDowm(): void {     this.setData({       hotGoodsForm.pageNum: this.data.hotGoodsForm.pageNum + 1,       homeLoadStatus: 1     })     app.ajax.post('/api/goods/getHotGoods', this.data.hotGoodsForm).then((res: any) => {       if (res.list.length != 0) {         this.setData({           hotGoodsList: [...this.data.hotGoodsList, ...res.list],           homeLoadStatus: 0         })       } else {         this.setData({           homeLoadStatus: 2         })       }     }).catch(() => {       this.setData({         homeLoadStatus: 3       })     })   },/**    * 生命周期函数--监听页面加载    */   onl oad() {     this.getBannerList()     this.getHotGoodsInit()   },    /**    * 生命周期函数--监听页面初次渲染完成    */   onReady() {    },    /**    * 生命周期函数--监听页面显示    */   onShow() {    },    /**    * 生命周期函数--监听页面隐藏    */   onHide() {    },    /**    * 生命周期函数--监听页面卸载    */   onUnload() {    },    /**    * 页面相关事件处理函数--监听用户下拉动作    */   onPullDownRefresh() {     this.getHotGoodsInit()   },    /**    * 页面上拉触底事件的处理函数    */   onReachBottom() {     this.getHotGoodsDowm()   },    /**    * 用户点击右上角分享    */   onShareAppMessage() {    } })

3、效果：