fix: place ledger pull hints in pull space
This commit is contained in:
parent
0b3372f764
commit
4511cbf2fa
|
|
@ -780,11 +780,11 @@ input:focus-visible {
|
|||
|
||||
.ledger-notice-slot { position:absolute; top:0; right:0; left:0; z-index:4; height:0; overflow:visible; pointer-events:none; }
|
||||
.conversion-notice { height:32px; display:flex; align-items:center; border-bottom:1px solid #eadfca; padding:4px 12px; background:#fff9ed; color:#775b24; font-size:11px; box-shadow:0 2px 8px rgba(58,43,17,.08); pointer-events:auto; }
|
||||
.ledger-pull-indicator { position:absolute; right:0; left:0; z-index:3; display:flex; align-items:center; justify-content:center; gap:5px; height:24px; color:#7d8c88; font-size:11px; pointer-events:none; opacity:var(--pull-progress); transform:translateY(calc((var(--pull-progress) - 1) * -10px)); }
|
||||
.ledger-pull-indicator.top { top:4px; }
|
||||
.ledger-pull-indicator.bottom { bottom:4px; transform:translateY(calc((1 - var(--pull-progress)) * 10px)); }
|
||||
.ledger-pull-indicator.refresh,.ledger-pull-indicator.previous { color:#087f72; }
|
||||
.ledger-pull-indicator.next { color:#3478e5; }
|
||||
.ledger-pull-space { display:flex; align-items:center; justify-content:center; gap:5px; flex:0 0 auto; color:#7d8c88; font-size:11px; opacity:var(--pull-progress); pointer-events:none; overflow:hidden; }
|
||||
.ledger-pull-space.top { margin:0 -16px; }
|
||||
.ledger-pull-space.bottom { margin:0 -16px; }
|
||||
.ledger-pull-space.refresh,.ledger-pull-space.previous { color:#087f72; }
|
||||
.ledger-pull-space.next { color:#3478e5; }
|
||||
.conversion-notice span { display:flex; align-items:center; gap:6px; }
|
||||
|
||||
.amount-value {
|
||||
|
|
|
|||
|
|
@ -257,6 +257,14 @@ function moveLedgerPull(event: TouchEvent) {
|
|||
return;
|
||||
}
|
||||
pullDistance.value = Math.min(144, delta * 0.55);
|
||||
if (edge === "bottom") {
|
||||
requestAnimationFrame(() => {
|
||||
const current = ledgerContent.value;
|
||||
if (current && pullEdge.value === "bottom") {
|
||||
current.scrollTop = current.scrollHeight - current.clientHeight;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
async function finishLedgerPull() {
|
||||
|
|
@ -462,14 +470,12 @@ async function shareLedger() {
|
|||
@touchcancel="cancelLedgerPull"
|
||||
>
|
||||
<div
|
||||
v-if="pullEdge && pullDistance > 8"
|
||||
class="ledger-pull-indicator"
|
||||
:class="[pullEdge, pullAction, { loading: pullLoading }]"
|
||||
:style="{ '--pull-progress': pullProgress }"
|
||||
v-if="pullEdge === 'top' && pullDistance > 8"
|
||||
:class="['ledger-pull-space', 'top', pullAction]"
|
||||
:style="{ height: `${pullDistance}px`, '--pull-progress': pullProgress }"
|
||||
role="status"
|
||||
>
|
||||
<ChevronUp v-if="pullEdge === 'bottom'" :size="15" />
|
||||
<RefreshCw v-else :size="15" :class="{ spinning: pullLoading }" />
|
||||
<RefreshCw :size="15" :class="{ spinning: pullLoading }" />
|
||||
<span>{{ pullLoading ? "正在加载" : pullLabel }}</span>
|
||||
</div>
|
||||
<div class="ledger-notice-slot" aria-live="polite">
|
||||
|
|
@ -559,6 +565,15 @@ async function shareLedger() {
|
|||
<strong>还没有流水</strong>
|
||||
<span>从第一笔开始记录</span>
|
||||
</div>
|
||||
<div
|
||||
v-if="pullEdge === 'bottom' && pullDistance > 8"
|
||||
:class="['ledger-pull-space', 'bottom', pullAction]"
|
||||
:style="{ height: `${pullDistance}px`, '--pull-progress': pullProgress }"
|
||||
role="status"
|
||||
>
|
||||
<ChevronUp :size="15" />
|
||||
<span>{{ pullLoading ? "正在加载" : pullLabel }}</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Transition name="share-sheet">
|
||||
|
|
|
|||
Loading…
Reference in New Issue