【小程序】支付宝小程序自定义下拉刷新组件

🌾 用支付宝原生框架写一个下拉刷新组件。

背景

支付宝提供的my.startPullDownRefreshAPI是下拉整个页面的，当有固定头部的时候，就达不到要求。而MAS提供的adc-flat-list组件可以支持固定头部，但是不能支持有底部，如果将底部放在组件外，就会出现两个滚动条。
后来参考了些博客，整理了这个满足业务需求的下拉刷新组件，参考文章最后贴出。

实现效果

子组件

组件命名为pull-refresh

<view class="pull-refresh-cont">
  <!-- 插槽 - 固定的头部 -->
  <slot name="header" />
  <scroll-view class="scroll-view" scroll-y='{
    {!isindrag}}' onScroll='scorll'>
    <view class='column' onTouchStart='start' onTouchEnd='end' onTouchMove='move'>
      <view a:if="{
    {refreshBatch}}">
        <view style='height:{
       {
       hei}}px;' class='refresh'>{
  {desc}}</view>
      </view>
      <!-- 插槽 - 列表内容 -->
      <slot />
      <!-- 插槽 - 跟在列表后面的底部内容 -->
      <slot name="footer" />
    </view>
  </scroll-view>
</view>

.pull-refresh-cont {
   
  display: flex;
  flex-direction: column;
  box-sizing: content-box;
  // 兼容底部安全距离
  height: calc(100vh - constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
  height: calc(100vh - env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
  overflow: hidden;
  background-color: #fff;
  
  .scroll-view {
   
    flex: 1;
    
    .column {
   
      height: 100%;
      
      .refresh {
   
        background-color: #f5f5f5;
        text-align: center;
        padding: 10rpx 0;
      }
    }
  }
}

import {
    createComponent } from '@whale.io/mini/es/miniu';

interface IProps {
   
  onRefresh: () => Promise<