diff --git a/example/src/scenes/Slider/Horizontal.js b/example/src/scenes/Slider/Horizontal.js
index 2f0adacd..3cec5b47 100644
--- a/example/src/scenes/Slider/Horizontal.js
+++ b/example/src/scenes/Slider/Horizontal.js
@@ -35,14 +35,17 @@ export default class SliderHorizontalScene extends Component {
);
diff --git a/example/src/scenes/Slider/Vertical.js b/example/src/scenes/Slider/Vertical.js
index 52aba6d2..39a8dae4 100644
--- a/example/src/scenes/Slider/Vertical.js
+++ b/example/src/scenes/Slider/Vertical.js
@@ -22,6 +22,25 @@ export default class SliderVerticalScene extends Component {
minimumTrackTintColor="#ff0000"
maximumTrackTintColor="#ff00ff"
/>
+
);
}
diff --git a/src/components/slider/__tests__/__snapshots__/slider.test.js.snap b/src/components/slider/__tests__/__snapshots__/slider.test.js.snap
index 53ad585c..a20479e7 100644
--- a/src/components/slider/__tests__/__snapshots__/slider.test.js.snap
+++ b/src/components/slider/__tests__/__snapshots__/slider.test.js.snap
@@ -296,6 +296,9 @@ exports[`ThemeSlider Component render width animateTransitions 1`] = `
},
undefined,
Object {
+ "overflow": "hidden",
+ "position": "absolute",
+ "right": 0,
"width": 50,
},
Object {},
@@ -778,6 +781,7 @@ exports[`ThemeSlider Component basic render 3`] = `
"width": 300,
}
}
+ type="normal"
value={24}
/>
`;
@@ -845,6 +849,7 @@ exports[`ThemeSlider Component basic render 4`] = `
"width": 300,
}
}
+ type="normal"
value={24}
/>
`;
diff --git a/src/components/slider/slider.js b/src/components/slider/slider.js
index 835fe5ea..0d5f6f53 100644
--- a/src/components/slider/slider.js
+++ b/src/components/slider/slider.js
@@ -103,7 +103,10 @@ export default class Slider extends Component {
/**
* 滑块大小
*/
- thumbTouchSize: PropTypes.shape({ width: PropTypes.number, height: PropTypes.number }),
+ thumbTouchSize: PropTypes.shape({
+ width: PropTypes.number,
+ height: PropTypes.number,
+ }),
/**
* 滑动值变更回调
*/
@@ -172,6 +175,11 @@ export default class Slider extends Component {
* 是否为水平方向
*/
horizontal: PropTypes.bool,
+ /**
+ * 滑动条分为 2 种类型,parcel:轨道包裹滑块
+ *
+ */
+ type: PropTypes.oneOf(['parcel', 'normal']),
};
static defaultProps = {
@@ -191,6 +199,7 @@ export default class Slider extends Component {
animationType: 'timing',
horizontal: true,
onlyMaximumTrack: false, // 大小滑动条一致时, 可以设置为True, 优化性能
+ type: 'normal',
};
constructor(props) {
@@ -543,23 +552,23 @@ export default class Slider extends Component {
const rect = this.props.horizontal
? new Rect(
- touchOverflowSize.width / 2 +
+ touchOverflowSize.width / 2 +
this._getThumbLeft(this._getCurrentValue()) +
(state.thumbSize.width - props.thumbTouchSize.width) / 2,
- touchOverflowSize.height / 2 +
+ touchOverflowSize.height / 2 +
(state.containerSize.height - props.thumbTouchSize.height) / 2,
- props.thumbTouchSize.width,
- props.thumbTouchSize.height
- )
+ props.thumbTouchSize.width,
+ props.thumbTouchSize.height
+ )
: new Rect(
- touchOverflowSize.width / 2 +
+ touchOverflowSize.width / 2 +
(state.containerSize.width - props.thumbTouchSize.width) / 2,
- touchOverflowSize.height / 2 +
+ touchOverflowSize.height / 2 +
this._getThumbLeft(this._getCurrentValue()) +
(state.thumbSize.height - props.thumbTouchSize.height) / 2,
- props.thumbTouchSize.width,
- props.thumbTouchSize.height
- );
+ props.thumbTouchSize.width,
+ props.thumbTouchSize.height
+ );
return rect;
}
@@ -567,17 +576,17 @@ export default class Slider extends Component {
const thumbTouchRect = this._getThumbTouchRect();
const positionStyle = this.props.horizontal
? {
- left: thumbLeft,
- top: thumbTouchRect.y,
- width: thumbTouchRect.width,
- height: thumbTouchRect.height,
- }
+ left: thumbLeft,
+ top: thumbTouchRect.y,
+ width: thumbTouchRect.width,
+ height: thumbTouchRect.height,
+ }
: {
- left: thumbTouchRect.x,
- top: thumbLeft,
- width: thumbTouchRect.width,
- height: thumbTouchRect.height,
- };
+ left: thumbTouchRect.x,
+ top: thumbLeft,
+ width: thumbTouchRect.width,
+ height: thumbTouchRect.height,
+ };
return (