@y.dsh/swipe NPM

react轮播图组件

引入css（在scss文件中）

@import '~@y.dsh/swipe/lib/index.css';

import Swipe from '@y.dsh/swipe'; 
const { SwipeItem } = Swipe;

<Swipe
  swipeStyle={{ height: 200 }}
>
  <SwipeItem
    swipeItemStyle={{ backgroundColor: 'red' }}
  >
    <span>红</span>
  </SwipeItem>
</Swipe>

Swipe参数

参数	说明	默认值	类型	必选
children	子元素	undefined	SwipeItem \| SwipeItem[]	√
indicatorDots	显示指示点	true	boolean	×
indicatorColor	指示点颜色	rgba(0, 0, 0, .3)	string	×
indicatorActiveColor	选中指示点颜色	#000000	string	×
autoplay	无操作时自动播放	false	boolean	×
interval	自动播放延迟时间	5000	number	×
defaultCurrent	初始化滑块的index	0	number	×
current	受控的滑块与defaultCurrent同时配置 defaultCurrent将不生效	undefined	number	×
duration	停止滑块时滑块的动画时长	500	number	×
circular	是否采用衔接滑动	false	boolean	×
vertical	滑动方向是否为纵向	false	boolean	×
previousMargin	前边距可用于露出前一项的一小部分接受css单位	0px	string	×
nextMargin	后边距可用于露出后一项的一小部分接受css单位	0px	string	×
displayMultipleItems	同时显示的滑块数量不包括前后边距导致露出来的块	1	number	×
swipeItemOutsideHide	在显示区域外的swipeItem块不渲染子节点	false	boolean	×
swipeClassNames	最外层类名	undefined	string[] \| string	×
swipeStyle	最外层样式	{}	React.CSSProperties	×
onChange	当前滑块索引变化的回调	undefined	(props: { current: number }) => void	×
onTransition	滑动时的回调包括自动滑动	undefined	(props: { dx?: number, dy?: number }) => void	×
onAnimationFinish	滑块归位后的回调	undefined	(props: {dx?: number, dy?: number }) => void	×

SwipeItem参数

参数	说明	默认值	类型	必选
children	子元素	undefined	React.ReactNode	×
swipeItemClassNames	Item类名	undefined	string[] \| string	×
swipeItemStyle	Item样式	{}	React.CSSProperties	×

react swipe 轮播图

@y.dsh/hooks @y.dsh/utils classnames

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago