blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

fix(Picker): Fix the issue when scrolling the mouse wheel once but the element scrolls multiple times (#12290)

Browse Source 
* fix(Picker): Fix the problem of scrolling an element multiple times with one mouse roll

* fix(Test Cases): Corresponding Adjustment Test Cases about  #12290
This commit is contained in:
lllomh 2023-09-17 19:39:06 +08:00 committed by GitHub
parent 80fd5f6daa
commit 59e08cb912
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 25 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/picker/PickerColumn.js
View File

@ -202,11 +202,10 @@ export default createComponent({
return;
}
// get offset
// if necessary, can adjust distance value to make scrolling smoother
const distance = -deltaY;
// Calculate the offset based on itemHeight
const itemOffset = this.itemHeight * (deltaY > 0 ? -1 : 1);
this.offset = range(
this.startOffset + distance,
this.startOffset + itemOffset,
-(this.count * this.itemHeight),
this.itemHeight
);

36
src/picker/test/index.spec.js
View File

@ -1,5 +1,8 @@
import Picker from '..';
import PickerColumn, { MOMENTUM_LIMIT_TIME, MOMENTUM_LIMIT_DISTANCE} from '../PickerColumn';
import PickerColumn, {
MOMENTUM_LIMIT_TIME,
MOMENTUM_LIMIT_DISTANCE,
} from '../PickerColumn';
import { mount, triggerDrag, later } from '../../../test';
import { DEFAULT_ITEM_HEIGHT } from '../shared';
@ -353,7 +356,7 @@ test('wheel event on columns is detected', async () => {
});
test('wheel scroll on columns', async () => {
const fakeScroll = (translateY, deltaY)=> {
const fakeScroll = (translateY, deltaY) => {
// mock getComputedStyle
// see: https://github.com/jsdom/jsdom/issues/2588
const originGetComputedStyle = window.getComputedStyle;
@ -364,7 +367,7 @@ test('wheel scroll on columns', async () => {
transform: `matrix(1, 0, 0, 1, 0, ${translateY})`,
};
};
return new Promise(resolve => {
return new Promise((resolve) => {
const wrapper = mount(Picker, {
propsData: {
columns: simpleColumn,
@ -375,14 +378,16 @@ test('wheel scroll on columns', async () => {
deltaY,
});
return later(MOMENTUM_LIMIT_TIME + 10).then(()=>{
wrapper.find('.van-picker-column ul').trigger('transitionend');
resolve(wrapper.emitted('change'));
}).finally(()=>{
window.getComputedStyle = originGetComputedStyle;
});
return later(MOMENTUM_LIMIT_TIME + 10)
.then(() => {
wrapper.find('.van-picker-column ul').trigger('transitionend');
resolve(wrapper.emitted('change'));
})
.finally(() => {
window.getComputedStyle = originGetComputedStyle;
});
});
}
};
const topToDown = await fakeScroll(110, -MOMENTUM_LIMIT_DISTANCE);
expect(topToDown).toEqual(undefined);
@ -394,9 +399,12 @@ test('wheel scroll on columns', async () => {
expect(bottomToUp[0][1]).toEqual('1995');
const bottomToDown = await fakeScroll(-110, -(MOMENTUM_LIMIT_DISTANCE - 5));
expect(bottomToDown[0][1]).toEqual('1995');
expect(bottomToDown[0][1]).toEqual('1994');
const pos1992 = simpleColumn.indexOf('1992')
const momentum = await fakeScroll(-110 + (pos1992 + 1) * DEFAULT_ITEM_HEIGHT, MOMENTUM_LIMIT_DISTANCE + 10);
expect(momentum[0][1]).toEqual(simpleColumn[pos1992+1]);
const pos1992 = simpleColumn.indexOf('1992');
const momentum = await fakeScroll(
-110 + (pos1992 + 1) * DEFAULT_ITEM_HEIGHT,
MOMENTUM_LIMIT_DISTANCE + 10
);
expect(momentum[0][1]).toEqual(simpleColumn[pos1992 + 1]);
});