diff --git a/packages/hippy_ui_react/src/components/Slider/PropsType.tsx b/packages/hippy_ui_react/src/components/Slider/PropsType.tsx index 1c70c44..c38ec67 100644 --- a/packages/hippy_ui_react/src/components/Slider/PropsType.tsx +++ b/packages/hippy_ui_react/src/components/Slider/PropsType.tsx @@ -31,8 +31,10 @@ export interface SliderProps { blockStyle?: GenericStyleProp; /** 滑动块图片 */ blockImage?: string; - /** 状态变更 */ + /** 状态变更(每次move都会触发) */ onChange?: (data: { start: number; end: number }) => void; + /** 状态变更完成(触摸结束后触发) */ + onChangeEnd?: (data: { start: number; end: number }) => void; } export interface SliderState { diff --git a/packages/hippy_ui_react/src/components/Slider/index.tsx b/packages/hippy_ui_react/src/components/Slider/index.tsx index 32928bf..79ce4a9 100644 --- a/packages/hippy_ui_react/src/components/Slider/index.tsx +++ b/packages/hippy_ui_react/src/components/Slider/index.tsx @@ -196,8 +196,8 @@ export class Slider extends Component { // 把点击坐标转换为容器坐标 const _x = x - sliderX; // 中心点 - const blockLeftX = this.blockLeftX + (blockSize/2); - const blockRightX = this.blockRightX + (blockSize/2); + const blockLeftX = this.blockLeftX + blockSize / 2; + const blockRightX = this.blockRightX + blockSize / 2; // 只有一个滑块,则是end if (isDoubleBlock && sliderWidth) { // 如果是整个容器响应事件,则判断离那个滑块近 @@ -211,11 +211,11 @@ export class Slider extends Component { } else { // 判断点击的是哪个滑块 // 判断点击的位置是否在滑块blockSize之内 - if (Math.abs(blockRightX - _x) <= (blockSize / 2)) { + if (Math.abs(blockRightX - _x) <= blockSize / 2) { return EventOriginType.end; - } else if (Math.abs(blockLeftX - _x) <= (blockSize / 2)) { + } else if (Math.abs(blockLeftX - _x) <= blockSize / 2) { return EventOriginType.start; - }; + } // 未选中滑块 return null; } @@ -224,7 +224,7 @@ export class Slider extends Component { if (contentOnEvent) { return EventOriginType.end; } else { - if (Math.abs(blockRightX - _x) <= (blockSize / 2)) { + if (Math.abs(blockRightX - _x) <= blockSize / 2) { return EventOriginType.end; } // 未选中滑块 @@ -284,12 +284,12 @@ export class Slider extends Component { const style: { left?: number; right?: number } = this.blockType === EventOriginType.start ? { - // 需要减去滑块自身的seiz/2 - left: lineLeft + ((toNum - limitValues[0]) / allNumLen) * lineWidth - blockSize / 2, - } + // 需要减去滑块自身的seiz/2 + left: lineLeft + ((toNum - limitValues[0]) / allNumLen) * lineWidth - blockSize / 2, + } : { - right: lineRight + ((limitValues[1] - toNum) / allNumLen) * lineWidth - blockSize / 2, - }; + right: lineRight + ((limitValues[1] - toNum) / allNumLen) * lineWidth - blockSize / 2, + }; if (isWeb()) { if (this.blockType === EventOriginType.start) { @@ -320,6 +320,10 @@ export class Slider extends Component { onTouchEnd = (event: Partial) => { if (this.moveToNum !== null) { + this.props.onChangeEnd?.({ + start: this.blockType === EventOriginType.start ? this.moveToNum : this.startValues.startValue, + end: this.blockType === EventOriginType.end ? this.moveToNum : this.startValues.endValue, + }); if (this.blockType === EventOriginType.start) { this.setState({ ...this.state, startValue: this.moveToNum }); } else {