微信小程序（下拉刷新）

最新推荐文章于 2022-09-09 10:11:30 发布

风继续吹&

最新推荐文章于 2022-09-09 10:11:30 发布

阅读量141

点赞数

分类专栏：小程序文章标签：小程序

本文链接：https://blog.youkuaiyun.com/qq_48930299/article/details/118883831

版权

小程序专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了如何在微信小程序中实现下拉刷新功能，包括配置页面数据、监听滚动事件和设置刷新效果，帮助开发者提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// pages/home/home.js

//引入封装的数据请求
import { getBannerList, getProList } from './../../api/home'
Page({

  /**
   * 页面的初始数据
   */
  data: {
    width: '0px',
    statusBarHeight: '0px',
    bannerList: [],
    proList: [],
    scrollTop: 0,
    count: 2 // onload中已经添加了第一页的数据，页码是从2开始
  },
  backtop () {
    // https://developers.weixin.qq.com/miniprogram/dev/api/ui/scroll/wx.pageScrollTo.html
    wx.pageScrollTo({
      duration: 300,
      scrollTop: 0
    })
  },
  /**
   * 生命周期函数--监听页面加载
   * // 数据请求
   */
  onLoad: function (options) {
    const res = wx.getSystemInfoSync()
    console.log(res.screenWidth)
    console.log(res.statusBarHeight)
    const windowWidth = res.screenWidth - 100 - 50 -30
    this.setData({
      width: windowWidth,
      statusBarHeight: res.statusBarHeight
    })
    getBannerList().then(res => {
      console.log(res)
      this.setData({
        bannerList: res.data.data
      })
    })
    getProList().then(res => {
      console.log(res)
      this.setData({
        proList: res.data.data
      })
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    console.log('222')
    // 其实所谓的下啦刷新就是请求了第一页的数据
    // ？ 如果上一次滑到了第5页，回到顶部，下啦之后，页码要不要重置
    getProList().then(res => {
      this.setData({
        proList: res.data.data,
        count: 2
      })
      // 请求完毕一定要记得关闭下啦刷新效果
      wx.stopPullDownRefresh()
    })
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    console.log('1111')
    getProList({ count: this.data.count }).then(res => {
      if (res.data.data.length === 0) {
        // 没有数据
        wx.showToast({
          title: '没有更多数据了',
          icon: 'none'
        })
      } else {
        // 有数据，需要合并数据
        this.setData({
          // proList: this.data.proList.concat(res.data.data)
          proList: [ ...this.data.proList, ...res.data.data],
          count: this.data.count + 1 // 添加新的数据页面一定要加1
        })
      }
    })
  },
  onPageScroll ( {scrollTop}) {
    this.setData({
      scrollTop
    })
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})