diff --git a/packages/hippy_ui_react/src/components/Swiper/PropsType.tsx b/packages/hippy_ui_react/src/components/Swiper/PropsType.tsx index 5f6a2a2..d510814 100644 --- a/packages/hippy_ui_react/src/components/Swiper/PropsType.tsx +++ b/packages/hippy_ui_react/src/components/Swiper/PropsType.tsx @@ -18,6 +18,10 @@ export enum PagingType { page = 1, // 整屏划 pageRight = 2, // 整屏划-右边不截断 } +export enum MomentumType { + no = 0, // 不等待惯性滚动 + complete = 1, // 等待惯性滚动结束 +} export interface SwiperProps { /** 容器样式 */ @@ -55,6 +59,8 @@ export interface SwiperProps { }; /** 整屏滑动(一屏多卡片时设置是否整屏滑动) */ pagingEnabled?: boolean | PagingType; + /** 惯性滚动 */ + momentum?: MomentumType; } export interface SwiperState { diff --git a/packages/hippy_ui_react/src/components/Swiper/index.tsx b/packages/hippy_ui_react/src/components/Swiper/index.tsx index 78ece20..e2a9e9b 100644 --- a/packages/hippy_ui_react/src/components/Swiper/index.tsx +++ b/packages/hippy_ui_react/src/components/Swiper/index.tsx @@ -2,7 +2,7 @@ import React, { cloneElement, Component, Fragment, isValidElement, ReactElement, import { Platform, View } from '@hippy/react'; import ScrollView from '../../elements/ScrollView'; -import { PagingType, ScrollEvent, SwiperCardPosition, SwiperProps, SwiperState } from './PropsType'; +import { MomentumType, PagingType, ScrollEvent, SwiperCardPosition, SwiperProps, SwiperState } from './PropsType'; import { WINDOW_WIDTH } from '../../utils/Dimensions'; import { isWeb } from '../../utils/Utils'; import { transferStyle } from '../../utils/Styles'; @@ -27,6 +27,7 @@ export class Swiper extends Component { scrollEnabled: true, cardPosition: SwiperCardPosition.center, spacing: { between: 0, startAndEnd: 0 }, + momentum: MomentumType.complete, }; static defaultIndicator: Partial = { @@ -40,6 +41,7 @@ export class Swiper extends Component { static cardPosition = SwiperCardPosition; static pagingType = PagingType; + static momentumType = MomentumType; componentDidMount() { this.autoplay(); @@ -132,10 +134,15 @@ export class Swiper extends Component { // 滚动结束:等一下是否有惯性滚动 waitScrollEnd = (scrollEndX: number, options?: { byAccessible?: boolean; animated?: boolean }) => { this.clearWaitScrollEnd(); - this.timerWaitScrollEnd = setTimeout(() => { + if (this.props.momentum === MomentumType.complete) { + this.timerWaitScrollEnd = setTimeout(() => { + this.scrollEnd(scrollEndX, options); + this.autoplay(); + }, 50); + } else { this.scrollEnd(scrollEndX, options); this.autoplay(); - }, 50); + } }; // 清理滚动结束等待 @@ -465,7 +472,8 @@ export class Swiper extends Component { }; render() { - const { style, scrollEnabled, autoScrollWidth, onScrollBeginDrag, onScrollEndDrag, onLayout } = this.props; + const { style, scrollEnabled, autoScrollWidth, onScrollBeginDrag, onScrollEndDrag, onLayout, momentum } = + this.props; return ( <> { scrollEnabled={scrollEnabled} onScroll={this.onScroll} onMomentumScrollBegin={() => { - if (autoScrollWidth > 0) { + if (autoScrollWidth > 0 && momentum === MomentumType.complete) { this.stopAutoplay(); this.clearWaitScrollEnd(); } }} onMomentumScrollEnd={(e?: ScrollEvent) => { this.scrollX = e?.contentOffset ? e.contentOffset.x : this.scrollX; - if (!this.scrollByCode && autoScrollWidth > 0) { + if (!this.scrollByCode && autoScrollWidth > 0 && momentum === MomentumType.complete) { this.waitScrollEnd(e.contentOffset.x); this.autoplay(); }