微信小程序自定义下拉刷新样式scrollview下拉刷新

2021-04-02 18:02:26 阅读：146 来源： 互联网

标签：refresher loading false 自定义微信刷新 true

要求给项目里数据列表增加一个自定义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'
        });
      }
    });
  },

这样就基本完成啦

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

标签：refresher,loading,false,自定义,微信,刷新,true
来源： https://blog.csdn.net/glorious_future/article/details/115404610

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

微信小程序 自定义下拉刷新样式scrollview下拉刷新

这样就基本完成啦

微信小程序自定义下拉刷新样式scrollview下拉刷新