微信小程序 - 基于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-