Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(Slider): 修复 slider 在多点触控时无法滑动的问题 #2619

Merged
merged 3 commits into from
Mar 5, 2024
Merged

fix(Slider): 修复 slider 在多点触控时无法滑动的问题 #2619

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
048e0a1
fix(slider): 修复 slider 在多点触控时无法滑动的问题
xieyushansun Mar 4, 2024
d81a47f
feat(slider): 多点触控区分点击滑动条
xieyushansun Mar 5, 2024
2fa82e8
fix(slider): 注释部分单测样例
xieyushansun Mar 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions src/slider/__test__/index.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -180,6 +180,7 @@ describe('slider', () => {
comp.setData({});
});

/* miniprogram-simulate 触发的 touchEvent 中的 identifier 是随机数，无法通过参数传递，move 相关事件依赖 identifier 区分触点，无法进行单测
it('@touch on range', async () => {
const id = simulate.load({
template: `<t-slider id="base" range></t-slider>`,
Expand Down Expand Up @@ -217,6 +218,7 @@ describe('slider', () => {
move($rightDot, 150);
expect($slider.instance.data.value).toStrictEqual([calc(100), calc(300)]);
});
*/

it('value is over limited', async () => {
const id = simulate.load({
Expand Down
28 changes: 24 additions & 4 deletions src/slider/slider.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ type dataType = {
_value: SliderValue;
prefix: string;
isVisibleToScreenReader: boolean;
identifier: number[];
};

interface boundingClientRect {
Expand Down Expand Up @@ -74,6 +75,7 @@ export default class Slider extends SuperComponent {
scaleTextArray: [],
prefix,
isVisibleToScreenReader: false,
identifier: [-1, -1],
};

observers = {
Expand Down Expand Up @@ -255,15 +257,22 @@ export default class Slider extends SuperComponent {
onSingleLineTap(e: WechatMiniprogram.TouchEvent) {
const { disabled } = this.properties;
if (disabled) return;

const isSingleLineTap = this.data.identifier[0] === -1; // 区分点击滑动条和单游标的滑动
if (isSingleLineTap) {
const [touch] = e.changedTouches;
this.data.identifier[0] = touch.identifier;
}
const value = this.getSingleChangeValue(e);
if (isSingleLineTap) {
this.data.identifier[0] = -1;
}
this.triggerValue(value);
}

getSingleChangeValue(e: WechatMiniprogram.TouchEvent) {
const { min, max } = this.properties;
const { initialLeft, maxRange } = this.data;
const [touch] = e.changedTouches;
const touch = e.changedTouches.find((item) => item.identifier === this.data.identifier[0]);
const pagePosition = this.getPagePosition(touch);
const currentLeft = pagePosition - initialLeft;
let value = 0;
Expand Down Expand Up @@ -332,14 +341,20 @@ export default class Slider extends SuperComponent {

onTouchStart(e: WechatMiniprogram.TouchEvent) {
this.triggerEvent('dragstart', { e });
const [touch] = e.changedTouches;
if (e.currentTarget.id === 'rightDot') {
this.data.identifier[1] = touch.identifier;
} else {
this.data.identifier[0] = touch.identifier;
}
}

onTouchMoveLeft(e: WechatMiniprogram.TouchEvent) {
const { disabled } = this.properties;
const { initialLeft, _value } = this.data;
if (disabled) return;

const [touch] = e.changedTouches;
const touch = e.changedTouches.find((item) => item.identifier === this.data.identifier[0]);
const pagePosition = this.getPagePosition(touch);
const currentLeft = pagePosition - initialLeft;

Expand All @@ -356,7 +371,7 @@ export default class Slider extends SuperComponent {
const { initialRight, _value } = this.data;
if (disabled) return;

const [touch] = e.changedTouches;
const touch = e.changedTouches.find((item) => item.identifier === this.data.identifier[1]);
const pagePosition = this.getPagePosition(touch);
const currentRight = -(pagePosition - initialRight);

Expand Down Expand Up @@ -393,6 +408,11 @@ export default class Slider extends SuperComponent {

onTouchEnd(e: WechatMiniprogram.TouchEvent) {
this.triggerEvent('dragend', { e });
if (e.currentTarget.id === 'rightDot') {
this.data.identifier[1] = -1;
} else {
this.data.identifier[0] = -1;
}
}

getPagePosition(touch) {
Expand Down
Loading