fix(Tab): incorrect initial swipe position

This commit is contained in:
chenjiahan 2020-10-03 15:42:56 +08:00
parent 8296b657a0
commit f264c46dd8

View File

@ -1,4 +1,4 @@
import { ref, watch } from 'vue'; import { ref, watch, onMounted } from 'vue';
import { createNamespace } from '../utils'; import { createNamespace } from '../utils';
import Swipe from '../swipe'; import Swipe from '../swipe';
@ -7,7 +7,6 @@ const [createComponent, bem] = createNamespace('tabs');
export default createComponent({ export default createComponent({
props: { props: {
inited: Boolean, inited: Boolean,
duration: [Number, String],
animated: Boolean, animated: Boolean,
swipeable: Boolean, swipeable: Boolean,
lazyRender: Boolean, lazyRender: Boolean,
@ -15,6 +14,10 @@ export default createComponent({
type: Number, type: Number,
required: true, required: true,
}, },
duration: {
type: [Number, String],
required: true,
},
currentIndex: { currentIndex: {
type: Number, type: Number,
required: true, required: true,
@ -39,7 +42,7 @@ export default createComponent({
ref={swipeRef} ref={swipeRef}
loop={false} loop={false}
class={bem('track')} class={bem('track')}
duration={props.duration} duration={+props.duration * 1000}
touchable={props.swipeable} touchable={props.swipeable}
lazyRender={props.lazyRender} lazyRender={props.lazyRender}
showIndicators={false} showIndicators={false}
@ -53,15 +56,18 @@ export default createComponent({
return Content; return Content;
}; };
watch( const swipeToCurrentTab = (index: number) => {
() => props.currentIndex, const swipe = swipeRef.value;
(index) => { if (swipe && swipe.state.active !== index) {
const swipe = swipeRef.value; swipe.swipeTo(index, { immediate: !props.inited });
if (swipe && swipe.state.active !== index) {
swipe.swipeTo(index, { immediate: !props.inited });
}
} }
); };
watch(() => props.currentIndex, swipeToCurrentTab);
onMounted(() => {
swipeToCurrentTab(props.currentIndex);
});
return () => ( return () => (
<div <div