- 点击时不再让滑块在 touchstart 直接跳到手指位置 - 拖动超过 12px 阈值后才跟手,位置统一用百分比,避免 px/calc 混用导致跳变 - 松手按命中 tab 切页,同一 tab 不重复跳转
31 lines
1.1 KiB
JavaScript
31 lines
1.1 KiB
JavaScript
import test from 'node:test'
|
|
import assert from 'node:assert/strict'
|
|
import { clampPercent, getTabBarFrame, hasDragged, tabIndexAtPercent } from '../src/custom-tab-bar/tabBarGeometry.js'
|
|
|
|
test('maps a drag percent to the tab under the finger', () => {
|
|
assert.equal(tabIndexAtPercent(10, 5), 0)
|
|
assert.equal(tabIndexAtPercent(30, 5), 1)
|
|
assert.equal(tabIndexAtPercent(50, 5), 2)
|
|
assert.equal(tabIndexAtPercent(70, 5), 3)
|
|
assert.equal(tabIndexAtPercent(90, 5), 4)
|
|
})
|
|
|
|
test('clamps percent and maps out-of-range to edge tabs', () => {
|
|
assert.equal(clampPercent(-5), 0)
|
|
assert.equal(clampPercent(120), 100)
|
|
assert.equal(clampPercent(Number.NaN), 0)
|
|
assert.equal(tabIndexAtPercent(-5, 5), 0)
|
|
assert.equal(tabIndexAtPercent(120, 5), 4)
|
|
})
|
|
|
|
test('only treats a move as a drag beyond the threshold', () => {
|
|
assert.equal(hasDragged(100, 110, 12), false)
|
|
assert.equal(hasDragged(100, 112, 12), true)
|
|
assert.equal(hasDragged(100, 88, 12), true)
|
|
})
|
|
|
|
test('derives the floating bar frame from window width', () => {
|
|
assert.deepEqual(getTabBarFrame(375), { left: 18, width: 339 })
|
|
assert.deepEqual(getTabBarFrame(750), { left: 36, width: 678 })
|
|
})
|