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

本文主要是介绍小程序页面的上拉加载和下拉加载，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

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、效果：

这篇关于小程序页面的上拉加载和下拉加载的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！