微信小程序 - 基于scroll view 实现下拉刷新

简介

        本文会基于scroll view 实现下拉刷新效果，在下拉的时候会进入loading状态。

实现效果

效果如上图所示，在下拉到底部时候，会出现loading条，在处理完成后loading条消失。

具体代码

布局

<scroll-view 
     scroll-y 
    style="height:400px;" 
    lower-threshold="{{10}}" 
    scroll-top="{{scrollTop}}" 
    bind:scrolltolower="scrollToLower" 
    refresher-enabled="true" 
    refresher-default-style="black" 
    refresher-threshold="{{100}}" 
    refresher-triggered="{{triggered}}" 
    bindrefresherrefresh="onRefresh">
  <view style="height: 500px;">Hello, world</view>
</scroll-view>

           scroll-view 配置 refresher-enabled开启加载效果。

           lower-threshold 和bind:scrolltolower对应滚动到底部触发事件。

           refresher相关配置为加载效果配置，scrollToLower函数会将triggered设置为true，当triggered为true时，会触发bindrefresherrefresh事件。

逻辑

Page({
  data: {
    triggered: false, // 加载中状态
    scrollTop: 0 
  },
  onReady: function () {
    console.log('ready')
  },
  scrollToLower: function () {
    if (this.data.triggered) {
      
      return;
    }
    console.log('scrollToLower')
    this.setData({
      
      triggered: true  // 开启加载
    })
  },
  // 
  onRefresh: function () {
    console.log('onRefresh')
    this.setData(
      {
        scrollTop:0 // 滚到首部，查看加载效果
      }
    )
    // 模拟请求回数据后 停止加载
    setTimeout(() => {
      this.setData({
        triggered: false, // 关闭加载
        scrollTop: 0
      });
    }, 3000);
  }
 
 
})