aurora-admin/frameworks-mobile/PullRefresh.uniapp.vue

<template>
  <view
    class="kole-m-pullrefresh"
    :class="stateClass"
    :style="'--kole-m-pullrefresh-offset:' + offset + 'rpx'"
    @touchstart="onStart"
    @touchmove="onMove"
    @touchend="onEnd"
    @touchcancel="onEnd"
  >
    <view class="kole-m-pullrefresh__indicator" role="status" aria-live="polite">
      <view class="kole-m-pullrefresh__spinner" :class="spinClass"></view>
      <text class="kole-m-pullrefresh__text">{{ stateText }}</text>
    </view>
    <view class="kole-m-pullrefresh__content">
      <slot></slot>
      <!-- 规格 §4.6：需保留一个非手势的等价入口 -->
      <view class="kole-m-pullrefresh__fallback" role="button" @tap="emit('refresh')">
        <text>{{ fallbackLabel }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
/* uni-app 端 · 下拉刷新（移动端）— 规格 §4
   跨端差异（重要）：小程序 / App 端没有 PointerEvent，手势只能用
   @touchstart / @touchmove / @touchend，位移取 touch 事件的 clientY；
   阈值 60px 在 rpx 下折算为 120rpx（750rpx = 视口宽度）。
   规格 §4.7 明确「与页面整体下拉的竞争规则」未定，故不对 touchmove 调 preventDefault，
   纵向滚动仍由宿主页面的 scroll-view / page 决定。 */
import { computed, ref } from 'vue';

const props = defineProps({
  /* 触发阈值：uni-app 端的单位是 rpx（750rpx = 视口宽度），默认 120rpx ≈ 60px @375pt。
     契约 api.props.threshold 说明里写明了「浏览器端 px / 本端 rpx」的单位差异。 */
  threshold: { type: Number, default: 120 },
  refreshing: { type: Boolean, default: false },
  done: { type: Boolean, default: false },
  fallbackLabel: { type: String, default: '刷新列表' }
});
const emit = defineEmits(['refresh']);

const offset = ref(0);
const drag = ref('');
const startY = ref(0);
const startX = ref(0);
const dy = ref(0);
const active = ref(false);

const stateClass = computed(() => {
  if (props.refreshing) return 'is-refreshing';
  if (props.done) return 'is-done';
  return drag.value ? 'is-' + drag.value : '';
});
const stateText = computed(() => {
  if (props.refreshing) return '正在刷新…';
  if (props.done) return '刷新完成';
  return drag.value === 'ready' ? '松开立即刷新' : '下拉即可刷新';
});
const spinClass = computed(() => 'is-' + (props.refreshing || props.done ? 'spinning' : 'idle'));

function touch(e) {
  var t = (e.touches && e.touches[0]) || (e.changedTouches && e.changedTouches[0]) || {};
  return { x: t.clientX != null ? t.clientX : t.pageX, y: t.clientY != null ? t.clientY : t.pageY };
}
function onStart(e) {
  if (props.refreshing) return;
  var p = touch(e);
  active.value = true;
  startX.value = p.x;
  startY.value = p.y;
  dy.value = 0;
}
function onMove(e) {
  if (!active.value) return;
  var p = touch(e);
  dy.value = p.y - startY.value;                      /* 单次 touchmove 内用像素判方向，仅用于阈值换算 */
  var dx = Math.abs(p.x - startX.value);
  if (dx > Math.abs(dy.value)) { active.value = false; return; }
  var rpx = dy.value * 2;                             /* 1px ≈ 2rpx（375pt 视口） */
  if (rpx <= 0) { offset.value = 0; drag.value = ''; return; }
  offset.value = rpx;
  drag.value = rpx >= props.threshold ? 'ready' : 'pulling';
}
function onEnd() {
  if (!active.value) return;
  active.value = false;
  if (offset.value >= props.threshold) {
    offset.value = props.threshold;
    drag.value = '';
    emit('refresh');
  } else {
    offset.value = 0;
    drag.value = '';
  }
}
</script>

<style>
.kole-m-pullrefresh {
  --kole-m-pullrefresh-offset: 0rpx;
  --kole-m-touch-target: 88rpx;
  --kole-m-font-size-label: 28rpx;
  --kole-m-gutter: 32rpx;
  position: relative;
  overflow: hidden;
}

.kole-m-pullrefresh__indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--kole-m-pullrefresh-offset);
  overflow: hidden;
  color: var(--kole-color-text-secondary);
  font-size: var(--kole-m-font-size-label);
  transition: height 300ms ease-out;
}

.kole-m-pullrefresh.is-refreshing .kole-m-pullrefresh__indicator,
.kole-m-pullrefresh.is-done .kole-m-pullrefresh__indicator { height: 120rpx; }

.kole-m-pullrefresh__spinner {
  width: 40rpx;
  height: 40rpx;
  border: 4rpx solid var(--kole-color-border);
  border-top-color: var(--kole-color-brand);
  border-radius: 50%;
}

.kole-m-pullrefresh__spinner.is-spinning { animation: kole-m-pullrefresh-spin 800ms linear infinite; }

@keyframes kole-m-pullrefresh-spin {
  to { transform: rotate(360deg); }
}

.kole-m-pullrefresh__content {
  transform: translateY(var(--kole-m-pullrefresh-offset));
  transition: transform 300ms ease-out;
}

.kole-m-pullrefresh__fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--kole-m-touch-target);
  border-top: 1rpx solid var(--kole-color-border);
  background-color: var(--kole-color-card-bg);
  color: var(--kole-color-brand);
  font-size: var(--kole-m-font-size-label);
}
</style>