antd-mobile/es/refresh-control/style/index.less

基于 React 的移动设计规范实现

@pull-to-refresh: am-refresh-control;

.@{pull-to-refresh} {
  position: relative;
  overflow: hidden;
  user-select: none;

  &-content {
    transform-origin: left top;
    transform: translateZ(0);
  }

  &-ptr {
    color: grey;
    text-align: center;
    height: 50px;
    margin-top: -50px;
    overflow: hidden;

    &-icon {
      display: block;
    }

    &-loading {
      display: none;
    }
  }

  &-loading {
    .@{pull-to-refresh}-ptr {
      &-icon {
        display: none;
      }

      &-loading {
        display: block;
      }
    }
  }

  &-pull {
    display: flex;
  }

  &-release {
    display: none;
  }

  &-pull,
  &-release {
    align-items: center;
    justify-content: center;

    .am-icon,
    span {
      display: block; // 一些 webview 里需要设置，不然顶部对不齐
    }
  }

  &-active &-pull {
    display: none;
  }

  &-active &-release {
    display: flex;
  }

  &-deactive {
    .@{pull-to-refresh}-ptr {
      &-icon,
      &-loading {
        display: none;
      }
    }
  }
}