博客

要求给项目里数据列表增加一个自定义loading，花里胡哨的

不光得琢磨一下怎么再下拉刷新的时候替换上自定义的loading，还要自己写一个loading

感觉好难，但是还得写，当我们遇到困难不要退缩，我们要迎难而上！

首先我们得先知道scroll-view怎么下拉刷新

<scroll-view
     class='goods_list' 
     scroll-y="{{true}}"
     scroll-with-animation="true"
     //自定义下拉刷新被触发
     bindrefresherrefresh="onRefresh" 
     //开启自定义下拉刷新
     refresher-enabled='{{true}}' 
     //设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发
     refresher-triggered='{{pulling}}'
     //设置自定义下拉刷新默认样式
     refresher-default-style="none"
     //设置自定义下拉刷新阈值(我理解的可能是自定义的loading的高度范围)
     refresher-threshold="{{80}}">
     。。。。
<scroll-view>

这样的话，下拉刷新基本上就好了

然后再把自己写的加载动画放上去

<scroll-view
    class='goods_list' 
    scroll-y="{{true}}"
    scroll-with-animation="true"
    //自定义下拉刷新被触发
    bindrefresherrefresh="onRefresh" 
    //开启自定义下拉刷新
    refresher-enabled='{{true}}' 
    //设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发
    refresher-triggered='{{pulling}}'
    //设置自定义下拉刷新默认样式
    refresher-default-style="none"
    //设置自定义下拉刷新阈值(我理解的可能是自定义的loading的高度范围)
    refresher-threshold="{{80}}">
    //自定义加载动画solt
    <view slot="refresher" 
        class="refresh-container" 
        style="width: 100%; height: 60px; background: #fff; display: flex; align-items: center;justify-content: center;">
        <view class="view1" style="position: absolute; display: flex; align-items: center;justify-content: center;width: 100%;">
        //加载动画组件
            <loadAnimation id='loadingPIC'></loadAnimation>
        </view>
    </view>
<scroll-view>

到这儿wxml的部分差不多就完成了，接下来就是js部分

这部分就是下拉开始刷新

/**
  * @name      刷新
  * @date      2021-03-30
  */
  onRefresh() {
  //这个是用来控制加载动画组件的计时器的，此处打开计时器
    this.loadingPIC.changeHeight(true)
    //获取数据列表
    this.getGoodsList(1,false)
  },

获取数据列表

getGoodsList: function (page) {
    wx.request({
      url:api,
      data: {
        page: page,
        page_size: 20,
      },
      header: {
        "Content-type": "application/x-www-form-urlencoded"
      },
      method: "POST",
      dataType: "json",
      success: function (a) {
      //关闭loading
        wx.hideLoading();
        //关闭加载动画组件计时器
        e.loadingPIC.changeHeight(false)
        //这个很必要，一定要写，是用来收起下拉的，不写的话会一直加载状态，不收回去
        e.setData({
          pulling:false
        })
      },
      fail: function (e) {
        //关闭加载动画组件计时器
        e.loadingPIC.changeHeight(false)
        //收起下拉
        e.setData({
          pulling:false
        })
        //关闭loading
        wx.hideLoading();
        //失败提示
        wx.showToast({
          title: e.errMsg || err.msg || e,
          icon: 'none'
        });
      }
    });
  },

这样就基本完成啦

另起一篇说说这个父组件控制子组件计时器，说白了就是父组件调用子组件方法！！