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; return;
} }
// get offset // Calculate the offset based on itemHeight
// if necessary, can adjust distance value to make scrolling smoother const itemOffset = this.itemHeight * (deltaY > 0 ? -1 : 1);
const distance = -deltaY;
this.offset = range( this.offset = range(
this.startOffset + distance, this.startOffset + itemOffset,
-(this.count * this.itemHeight), -(this.count * this.itemHeight),
this.itemHeight this.itemHeight
); );

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

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