小程序下拉时 自定义顶部提示语 松开加载中 加载完成自动隐藏？

Question

请问这种效果怎么实现？

Answer 1

自定义刷新

https://developers.weixin.qq.com/miniprogram/dev/component/sc...
已支持 scroll-view 自定义下拉刷新，需自定义的，建议通过 scroll-view 的方式实现
链接最下方:

api做刷新

在页面的json文件中添加设置：
“enablePullDownRefresh”: true
也就是写成下面这样子：

{             
  "usingComponents": {},
  "enablePullDownRefresh": true
}

js文件中写一个onRefresh()生命周期：

onRefresh:function(){
    //导航条加载动画
    wx.showNavigationBarLoading()
    //loading 提示框
    wx.showLoading({
      title: 'Loading...',
    })
    console.log("下拉刷新啦");
    setTimeout(function () {
      wx.hideLoading();
      wx.hideNavigationBarLoading();
      //停止下拉刷新
      wx.stopPullDownRefresh();
    }, 2000)
  },

在onPullDownRefresh()中调用上面写的函数：

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