微信小程序填坑之路（八）：下拉刷新动画没有动画效果的原因

下拉刷新与上拉加载的使用

下来刷新和上拉加载是一款应用中非常常用的两种功能，微信小程序直接提供了这两种功能，下面来看下如何使用。

• 先在页面的json文件中添加 "enablePullDownRefresh": true，表示开启下拉刷新与上拉加载功能。

json.png

• 然后在页面的js文件中实现onPullDownRefresh与onReachBottom方法

 // 下拉刷新方法
 onPullDownRefresh: function() {
    // 显示标题栏进度条效果
    wx.showNavigationBarLoading();
    this.setData({
      pageSrc: WATERFALL_SOURCE.source
    }, () => {
      // 取消标题栏进度条效果
      wx.hideNavigationBarLoading();
      // 取消页面刷新动画
      wx.stopPullDownRefresh();
    });
  },
 
  // 上拉加载方法
  onReachBottom: function() {
    let _pageNo = this.data.pageNo + 1;
    this.setData({
      pageNo: _pageNo,
      pageSrc: this.data.pageSrc
    });
  }

微信小程序是默认有下拉刷新动画效果的，但是没有上拉加载效果，上拉加载动画效果需要我们自己实现。除此之外，小程序还提供在标题栏上显示加载动画的一个api wx.showNavigationBarLoading();，可以在下拉刷新和上拉加载时调用，以此来更加明显的突显加载效果，但是不要忘记在刷新或者加载更多后调用wx.hideNavigationBarLoading()来取消加载动画。

下拉刷新没有动画效果

小程序的下拉刷新动画是在页面后显示三个闪烁的圆点，但是有时会发现，页面下拉刷新时并没有出现动画效果。此时大部分的原因是因为你的主题背景色与文本主题色搭配不当导致的。

• 如下设置，是无法看到动画效果，因为背景色与文本色相似

 "backgroundColor":"#fff",
 "backgroundTextStyle":"light",

• 改成以下设置，则可以看到动画效果

 "backgroundColor":"#fff",
 "backgroundTextStyle":"dark",

以上设置可以在app.json中设置，也可以单独在页面的json文件中设置。另外，小程序的背景色 backgroundColor 是默认为白色的，这点需要注意。

在app.json中设置

在页面的json文件中设置