下拉刷新

配置与回调

• 在 .json 文件中添加配置开启下拉刷新

{
  "enablePullDownRefresh": true,//开启下拉刷新
  "backgroundTextStyle": "dark" //配置颜色
}

• onPullDownRefresh 是下拉刷新的回调函数

/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
    wx.showNavigationBarLoading();
},

• stopPullDownRefresh 是自己写的停止下拉动效函数

stopPullDownRefresh() {
    wx.stopPullDownRefresh();
    wx.hideNavigationBarLoading();
},

Question

Q1： 下拉动效出来了，但是没有触发回调函数

原因： 页面问题：页面高度 = 屏幕高度，没有任何可滚动空间

• 代码里的布局逻辑（必然是有这种结构）：

page { height: 100%; }
.container { height: 100vh; }
.full_screen_container { height: 100%; }

• 这种写法会导致：

• 页面高度 = 手机屏幕高度 → 页面无法滚动 → 系统认为 “没有下拉动作” → 不触发 onPullDownRefresh 回调

• 但！系统依然会播放下拉动画（因为配置开着）。

• 下拉刷新动画是 【系统全局自动触发】 的，只要配置了 enablePullDownRefresh:true，不管页面能不能滚动、不管回调写没写，动画都会出现！

• 但 onPullDownRefresh ()回调函数是业务逻辑触发，必须满足页面存在可滚动区域 + 页面真的发生了下拉滚动行为才会执行！

解决方案

方案一：

• 把根容器改成这样

/* 必须去掉固定 100% 高度！！！ */
page {
  height: auto; /* 关键 */
  min-height: 100%;
}

.container {
  min-height: 100vh; /* 不能写死 height */
  overflow: visible;
}

方案二：

/* 给页面加一个看不见的高度，强制让页面可滚动 */
page::after {
  content: '';
  display: block;
  height: 1rpx;
}