前两天修复了 tdesign-miniprogram 的一个 bug，Picker 组件快速滑动的时候会有重影。具体表现在：缓慢滑动的时候，Picker 的 item 在抖动。一开始拿到问题猜测是不是 onTouchStart 的时候频繁 setData 导致的性能问题，后来研究了一下 onTouchStart 的实现，发现不是这个原因，原本的逻辑如下：
<viewclass="{{classPrefix}}__wrapper"style="transition: transform {{ duration }}ms cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, {{ offset }}px, 0)">...</view>
onTouchMove(event) {const { pickItemHeight } = this.data;const { StartY, StartOffset } = this;// touch偏移增量const touchDeltaY = event.touches[0].clientY - StartY;const deltaY = this.calculateViewDeltaY(touchDeltaY, pickItemHeight);this.setData({offset: range(StartOffset + deltaY, -(this.getCount() * pickItemHeight), 0),duration: DefaultDuration, // DefaultDuration: 240});},/*** 将屏幕滑动距离换算为视图偏移量 模拟渐进式滚动* @param touchDeltaY 屏幕滑动距离*/calculateViewDeltaY(touchDeltaY: number, itemHeight: number): number {return Math.abs(touchDeltaY) > itemHeight ? 1.2 * touchDeltaY : touchDeltaY;}
问题很明显了，onTouchMove 频繁触发，每次计算出新的 offset 然后给 item 的 style，但是 duration 是 240ms，onTouchMove 会在 240ms 内触发多次，导致上次的过度效果还没完成，又会重新进入新的过渡从而导致抖动。
原有的逻辑是通过滚动超过原本 1.2 * itemHeight，然后在 240ms 内完成过度来实现渐进式滚动的。那么有没有其它方法来实现渐进式滚动，网上找了一下资料，渐进式滚动是类似于 iOS 上滑动后手离开屏幕还会有一段距滚动的效果，这个就好比自然界中的惯性效果，更加符合人的直觉。
惯性滚动的核心部分在于两个点：
- 惯性滚动的速度线性减慢直到停止
- 滚动的距离和速度取决于手滑动的速度
第一个好理解，给一个负的加速度。第二点在于如何来判断滚动的速度快慢：即手在屏幕上滑动的距离，和持续的时间，决定了惯性速度的快慢。换句话说手在短时间内滑动很大一段距离，就代表滑动的快。还有一点需要注意，持续的时间越短速度相对越大，如果停留的时间非常短或者是缓慢滑动是不应该执行惯性滑动的，一般认为停留的时间大于 300ms 且滑动距离大于 15 才执行。
理解了这个核心思路，就该用代码实现效果了。滚动的实现离不开三个方法，onTouchStart，onTouchMove，onTouchEnd。
• onTouchStart：记录第一次触摸屏幕的 timestamp
• onTouchMove：实时更新 offset
• onTouchEnd：判断是否需要惯性滚动，如果需要计算滚动速度并执行滚动。
// 动画持续时间
const ANIMATION_DURATION = 1000;
// 和上一次move事件间隔小于INERTIA_TIME
const INERTIA_TIME = 300;
// 且距离大于`MOMENTUM_DISTANCE`时，执行惯性滚动
const INERTIA_DISTANCE = 15;const range = function (num: number, min: number, max: number) {return Math.min(Math.max(num, min), max);
};const momentum = (distance: number, duration: number) => {let nDistance = distance;// 惯性滚动的速度const speed = Math.abs(nDistance / duration);// 加速度经验值: 0.005// 惯性滚动的距离，注意在上下滑动时偏移量是有正负的nDistance = (speed / 0.005) * (nDistance < 0 ? -1 : 1);return nDistance;
};
lifetimes = {created() {this.StartY = 0;this.StartOffset = 0;this.startTime = 0;},
};
methods = {onTouchStart(event) {this.StartY = event.touches[0].clientY;this.StartOffset = this.data.offset;this.startTime = Date.now();this.setData({duration: 0,});},onTouchMove(event) {const { StartY, StartOffset } = this;const { pickItemHeight } = this.data;// 偏移增量const deltaY = event.touches[0].clientY - StartY;const newOffset = range(StartOffset + deltaY, -(this.getCount() * pickItemHeight), 0);this.setData({offset: newOffset,});},onTouchEnd(event) {const { offset, labelAlias, valueAlias, columnIndex, pickItemHeight } = this.data;const { options } = this.properties;const { startTime } = this;if (offset === this.StartOffset) {return;}// 判断是否需要惯性滚动let distance = 0;const move = event.changedTouches[0].clientY - this.StartY;const moveTime = Date.now() - startTime;if (moveTime < INERTIA_TIME && Math.abs(move) > INERTIA_DISTANCE) {distance = momentum(move, moveTime);}// 调整偏移量const newOffset = range(offset + distance, -this.getCount() * pickItemHeight, 0);const index = range(Math.round(-newOffset / pickItemHeight), 0, this.getCount() - 1);this.setData({offset: -index * pickItemHeight,duration: ANIMATION_DURATION,curIndex: index,});if (index === this._selectedIndex) {return;}this._selectedIndex = index;// ... 省略事件触发逻辑},
}
另外改了组件逻辑，还得同步该一下测试用例，原本测试用例模拟渐进滚动用的 1.2 * pickItemHeight，新的逻辑会导致部分用例不通过。顺便了解了组件的测试用例方法：大致就是验证 style，props，event。在 event 这里用 dispatchEvent('tap') 来模拟点击，.dispatchEvent(touchMove, { touches: [{ x, y }]}) 模拟滚动，同时还要注意要给动画执行时间，比如 sleep(1000) 后再去 expect。
最后还有一点不足的是，在 onTouchEnd 后会立马算出 selectedIndex，导致最终的滚动结位置的 item 有了 active 效果，但是滚动还在进行中，视觉上稍微有点不统一，暂时没有好的解决办法。
看了一圈小程序组件库的 Picker 组件，很多都没有渐进式滚动效果，体验效果属实一般，动画直来直往，往往细节决定了用户的体验好坏。效果最好的一个是 NutUI，不仅有合理的动画效果，而且因为跨端的原因，在编译成小程序后用的微信小程序原生 Picker，滚动过程中会有震动的效果，这是原生 Picker 才有的能力。还有一点，在 active 效果的实现上，Picker 上覆盖率一层 mask，中间的一项始终保持 active 效果，这样就不用计算 selectedIndex 了。
