Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
京东前端
nutui-react
提交
e9c482db
N
nutui-react
项目概览
京东前端
/
nutui-react
通知
0
Star
2
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
N
nutui-react
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
未验证
提交
e9c482db
编写于
8月 12, 2022
作者:
L
lkjh3214
提交者:
GitHub
8月 12, 2022
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat: Swiper组件能力补齐,新增demo,添加国际化文档 (#196)
上级
ccc6e7e9
变更
10
显示空白变更内容
内联
并排
Showing
10 changed file
with
1612 addition
and
226 deletion
+1612
-226
src/packages/swiper/__tests__/swiper.spec.tsx
src/packages/swiper/__tests__/swiper.spec.tsx
+302
-0
src/packages/swiper/demo.scss
src/packages/swiper/demo.scss
+39
-0
src/packages/swiper/demo.tsx
src/packages/swiper/demo.tsx
+180
-9
src/packages/swiper/doc.en-US.md
src/packages/swiper/doc.en-US.md
+400
-116
src/packages/swiper/doc.md
src/packages/swiper/doc.md
+364
-79
src/packages/swiper/doc.zh-TW.md
src/packages/swiper/doc.zh-TW.md
+273
-0
src/packages/swiper/swiper.scss
src/packages/swiper/swiper.scss
+3
-0
src/packages/swiper/swiper.tsx
src/packages/swiper/swiper.tsx
+44
-13
src/packages/swiperitem/swiperitem.tsx
src/packages/swiperitem/swiperitem.tsx
+1
-7
src/styles/variables.scss
src/styles/variables.scss
+6
-2
未找到文件。
src/packages/swiper/__tests__/swiper.spec.tsx
0 → 100644
浏览文件 @
e9c482db
import
React
from
'
react
'
import
{
render
,
waitFor
}
from
'
@testing-library/react
'
import
'
@testing-library/jest-dom
'
import
{
act
}
from
'
react-dom/test-utils
'
import
{
Swiper
}
from
'
../swiper
'
import
{
SwiperItem
}
from
'
../../swiperitem/swiperitem
'
import
{
triggerDrag
}
from
'
@/utils/test/event
'
function
sleep
(
delay
=
0
):
Promise
<
void
>
{
return
new
Promise
((
resolve
)
=>
{
setTimeout
(
resolve
,
delay
)
})
}
test
(
'
should render width and height
'
,
()
=>
{
const
list
=
[
'
https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg
'
,
'
https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg
'
,
'
https://storage.360buyimg.com/jdc-article/welcomenutui.jpg
'
,
'
https://storage.360buyimg.com/jdc-article/fristfabu.jpg
'
,
]
const
state
:
any
=
{
height
:
150
,
initPage
:
0
,
width
:
375
,
}
const
{
height
,
initPage
,
width
}
=
state
const
onChange
=
(
e
:
number
)
=>
{}
const
{
container
}
=
render
(
<
Swiper
height
=
{
height
}
width
=
{
width
}
autoPlay
=
"2000"
initPage
=
{
initPage
}
onChange
=
{
onChange
}
paginationVisible
>
{
list
.
map
((
item
)
=>
{
return
(
<
SwiperItem
key
=
{
item
}
>
<
img
src
=
{
item
}
alt
=
""
/>
</
SwiperItem
>
)
})
}
</
Swiper
>
)
const
swiper
=
container
.
querySelectorAll
(
'
.nut-swiper__inner
'
)[
0
]
const
item
=
container
.
querySelectorAll
(
'
.nut-swiper-item
'
)[
0
]
expect
(
swiper
).
toHaveStyle
({
height
:
'
150px
'
,
})
expect
(
item
).
toHaveStyle
({
width
:
'
375px
'
,
})
})
test
(
'
should render initpage
'
,
()
=>
{
const
list
=
[
'
https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg
'
,
'
https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg
'
,
'
https://storage.360buyimg.com/jdc-article/welcomenutui.jpg
'
,
'
https://storage.360buyimg.com/jdc-article/fristfabu.jpg
'
,
]
const
state
:
any
=
{
height
:
150
,
initPage
:
1
,
width
:
375
,
}
const
{
height
,
initPage
,
width
}
=
state
const
onChange
=
(
e
:
number
)
=>
{}
const
{
container
}
=
render
(
<
Swiper
height
=
{
height
}
width
=
{
width
}
initPage
=
{
initPage
}
onChange
=
{
onChange
}
paginationVisible
>
{
list
.
map
((
item
)
=>
{
return
(
<
SwiperItem
key
=
{
item
}
>
<
img
src
=
{
item
}
alt
=
""
/>
</
SwiperItem
>
)
})
}
</
Swiper
>
)
const
swiper
=
container
.
querySelectorAll
(
'
.nut-swiper__inner
'
)[
0
]
expect
(
swiper
).
toHaveStyle
({
transform
:
'
translate3D(-375px,0,0)
'
,
})
})
test
(
'
should render direction
'
,
()
=>
{
const
list
=
[
'
https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg
'
,
'
https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg
'
,
'
https://storage.360buyimg.com/jdc-article/welcomenutui.jpg
'
,
'
https://storage.360buyimg.com/jdc-article/fristfabu.jpg
'
,
]
const
state
:
any
=
{
height
:
150
,
initPage
:
1
,
width
:
375
,
direction
:
'
vertical
'
,
}
const
{
height
,
initPage
,
width
,
direction
}
=
state
const
onChange
=
(
e
:
number
)
=>
{}
const
{
container
}
=
render
(
<
Swiper
height
=
{
height
}
width
=
{
width
}
direction
=
{
direction
}
initPage
=
{
initPage
}
onChange
=
{
onChange
}
paginationVisible
>
{
list
.
map
((
item
)
=>
{
return
(
<
SwiperItem
key
=
{
item
}
>
<
img
src
=
{
item
}
alt
=
""
/>
</
SwiperItem
>
)
})
}
</
Swiper
>
)
const
swiper
=
container
.
querySelectorAll
(
'
.nut-swiper__inner
'
)[
0
]
expect
(
swiper
).
toHaveStyle
({
transform
:
'
translate3D(0,-150px,0)
'
,
})
})
test
(
'
should render pagination
'
,
()
=>
{
const
list
=
[
'
https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg
'
,
'
https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg
'
,
'
https://storage.360buyimg.com/jdc-article/welcomenutui.jpg
'
,
'
https://storage.360buyimg.com/jdc-article/fristfabu.jpg
'
,
]
const
state
:
any
=
{
height
:
150
,
initPage
:
1
,
width
:
375
,
paginationColor
:
'
red
'
,
}
const
{
height
,
initPage
,
width
,
paginationColor
}
=
state
const
onChange
=
(
e
:
number
)
=>
{}
const
{
container
}
=
render
(
<
Swiper
height
=
{
height
}
width
=
{
width
}
initPage
=
{
initPage
}
onChange
=
{
onChange
}
paginationVisible
paginationColor
=
{
paginationColor
}
>
{
list
.
map
((
item
)
=>
{
return
(
<
SwiperItem
key
=
{
item
}
>
<
img
src
=
{
item
}
alt
=
""
/>
</
SwiperItem
>
)
})
}
</
Swiper
>
)
const
paginationItem
=
container
.
querySelectorAll
(
'
.nut-swiper__pagination-item
'
)
expect
(
paginationItem
).
toHaveLength
(
4
)
expect
(
paginationItem
[
1
]).
toHaveStyle
({
backgroundColor
:
'
red
'
,
})
})
test
(
'
should render loop and auto-play
'
,
async
()
=>
{
const
list
=
[
'
https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg
'
,
'
https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg
'
,
'
https://storage.360buyimg.com/jdc-article/welcomenutui.jpg
'
,
'
https://storage.360buyimg.com/jdc-article/fristfabu.jpg
'
,
]
const
state
:
any
=
{
height
:
150
,
initPage
:
0
,
width
:
375
,
direction
:
'
vertical
'
,
}
const
{
height
,
initPage
,
width
,
direction
}
=
state
const
onChange
=
(
e
:
number
)
=>
{}
const
{
container
}
=
render
(
<
Swiper
height
=
{
height
}
width
=
{
width
}
initPage
=
{
initPage
}
onChange
=
{
onChange
}
autoPlay
=
"100"
>
{
list
.
map
((
item
)
=>
{
return
(
<
SwiperItem
key
=
{
item
}
>
<
img
src
=
{
item
}
alt
=
""
/>
</
SwiperItem
>
)
})
}
</
Swiper
>
)
const
swiper
=
container
.
querySelectorAll
(
'
.nut-swiper__inner
'
)[
0
]
await
waitFor
(()
=>
{
expect
(
swiper
).
toHaveStyle
({
transform
:
'
translate3D(-375px,0,0)
'
,
})
})
})
test
(
'
should not allow to drag when touchable is false
'
,
()
=>
{
const
onChange
=
jest
.
fn
()
const
list
=
[
'
https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg
'
,
'
https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg
'
,
'
https://storage.360buyimg.com/jdc-article/welcomenutui.jpg
'
,
'
https://storage.360buyimg.com/jdc-article/fristfabu.jpg
'
,
]
const
state
:
any
=
{
height
:
150
,
initPage
:
0
,
width
:
375
,
direction
:
'
vertical
'
,
}
const
{
height
,
initPage
,
width
,
direction
}
=
state
const
{
container
}
=
render
(
<
Swiper
height
=
{
height
}
width
=
{
width
}
initPage
=
{
initPage
}
onChange
=
{
onChange
}
touchable
=
{
false
}
>
{
list
.
map
((
item
)
=>
{
return
(
<
SwiperItem
key
=
{
item
}
>
<
img
src
=
{
item
}
alt
=
""
/>
</
SwiperItem
>
)
})
}
</
Swiper
>
)
const
swiper
=
container
.
querySelectorAll
(
'
.nut-swiper__inner
'
)[
0
]
triggerDrag
(
swiper
,
220
,
0
)
expect
(
swiper
).
toHaveStyle
({
transform
:
'
translate3D(0px,0,0)
'
,
})
})
test
(
'
should not allow to drag when loop is false
'
,
async
()
=>
{
const
list
=
[
'
https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg
'
,
'
https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg
'
,
'
https://storage.360buyimg.com/jdc-article/welcomenutui.jpg
'
,
'
https://storage.360buyimg.com/jdc-article/fristfabu.jpg
'
,
]
const
state
:
any
=
{
height
:
150
,
initPage
:
3
,
width
:
375
,
direction
:
'
vertical
'
,
}
const
{
height
,
initPage
,
width
,
direction
}
=
state
let
_container
:
any
act
(()
=>
{
const
{
container
}
=
render
(
<
Swiper
height
=
{
height
}
width
=
{
width
}
initPage
=
{
initPage
}
loop
=
{
false
}
autoPlay
=
"100"
data
-
testid
=
"swiper_container"
>
{
list
.
map
((
item
)
=>
{
return
(
<
SwiperItem
key
=
{
item
}
>
<
img
src
=
{
item
}
alt
=
""
/>
</
SwiperItem
>
)
})
}
</
Swiper
>
)
_container
=
container
})
await
waitFor
(
async
()
=>
{
await
sleep
(
2000
)
const
swiper
=
_container
.
querySelectorAll
(
'
.nut-swiper__inner
'
)[
0
]
expect
(
swiper
).
toHaveStyle
({
transform
:
'
translate3D(-1125px,0,0)
'
,
})
},
{
timeout
:
3000
,
}
)
})
src/packages/swiper/demo.scss
浏览文件 @
e9c482db
.demo-box
{
position
:
relative
;
.nut-swiper
{
height
:
150px
;
img
{
...
...
@@ -18,4 +19,42 @@
color
:
#fff
;
font-size
:
14px
;
}
.nut-swiper-btns
{
width
:
100%
;
position
:
absolute
;
top
:
50%
;
transform
:
translateY
(
-15px
);
z-index
:
1
;
display
:
flex
;
justify-content
:
space-between
;
height
:
0px
;
span
{
display
:
flex
;
align-items
:
center
;
justify-content
:
center
;
width
:
20px
;
height
:
30px
;
background-color
:
rgba
(
0
,
0
,
0
,
0
.2
);
}
}
}
.vertical-center
{
.nut-swiper__pagination-vertical
{
i
{
width
:
6px
;
height
:
6px
;
border-radius
:
50%
;
&
.active
{
height
:
18px
;
border-radius
:
5px
;
}
}
}
.nut-swiper-item
{
height
:
300px
;
img
{
width
:
100%
;
height
:
100%
;
}
}
}
src/packages/swiper/demo.tsx
浏览文件 @
e9c482db
import
React
,
{
useState
}
from
'
react
'
import
React
,
{
useState
,
useEffect
}
from
'
react
'
import
SwiperItem
from
'
@/packages/swiperitem
'
import
Swiper
from
'
@/packages/swiper
'
import
'
@/packages/swiper/demo.scss
'
import
Icon
from
'
@/packages/icon
'
import
{
useTranslate
}
from
'
../../sites/assets/locale
'
interface
T
{
basic
:
string
asyc
:
string
dynamicDel
:
string
size
:
string
indicator
:
string
btns
:
string
vertical
:
string
horizontalCenter
:
string
verticalCenter
:
string
}
const
SwiperDemo
=
()
=>
{
const
[
translated
]
=
useTranslate
<
T
>
({
'
zh-CN
'
:
{
basic
:
'
基本用法
'
,
asyc
:
'
异步加载(3s)
'
,
dynamicDel
:
'
动态加载
'
,
size
:
'
自定义大小
'
,
indicator
:
'
自定义指示器
'
,
btns
:
'
手动切换
'
,
vertical
:
'
垂直方向
'
,
horizontalCenter
:
'
水平居中展示
'
,
verticalCenter
:
'
垂直居中展示
'
,
},
'
en-US
'
:
{
basic
:
'
Basic Usage
'
,
asyc
:
'
Asynchronous loading(3s)
'
,
dynamicDel
:
'
Dynamic loading
'
,
size
:
'
Custom size
'
,
indicator
:
'
Custom indicator
'
,
btns
:
'
Manual switching
'
,
vertical
:
'
Vertical direction
'
,
horizontalCenter
:
'
Horizontal center display
'
,
verticalCenter
:
'
Vertical center display
'
,
},
})
const
swiperRef
=
React
.
useRef
<
any
>
(
null
)
const
[
height
,
setHeight
]
=
useState
<
any
>
(
150
)
const
[
paginationColor
,
setPaginationColor
]
=
useState
<
string
>
(
'
#426543
'
)
...
...
@@ -11,7 +48,20 @@ const SwiperDemo = () => {
const
[
initPage2
,
setInitPage2
]
=
useState
<
any
>
(
0
)
const
[
initPage3
,
setInitPage3
]
=
useState
<
any
>
(
0
)
const
[
initPage4
,
setInitPage4
]
=
useState
<
any
>
(
0
)
const
[
initPage5
,
setInitPage5
]
=
useState
<
any
>
(
0
)
const
[
initPage6
,
setInitPage6
]
=
useState
<
any
>
(
0
)
const
[
initPage7
,
setInitPage7
]
=
useState
<
any
>
(
0
)
const
[
initPage8
,
setInitPage8
]
=
useState
<
any
>
(
0
)
const
[
initPage9
,
setInitPage9
]
=
useState
<
any
>
(
0
)
const
[
current
,
setCurrent
]
=
useState
(
1
)
const
[
current2
,
setCurrent2
]
=
useState
(
1
)
const
[
list1
,
setList1
]
=
useState
<
string
[]
>
([])
const
[
list2
,
setList2
]
=
useState
<
string
[]
>
([
'
https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg
'
,
'
https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg
'
,
'
https://storage.360buyimg.com/jdc-article/welcomenutui.jpg
'
,
'
https://storage.360buyimg.com/jdc-article/fristfabu.jpg
'
,
])
const
list
=
[
'
https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg
'
,
...
...
@@ -20,12 +70,27 @@ const SwiperDemo = () => {
'
https://storage.360buyimg.com/jdc-article/fristfabu.jpg
'
,
]
const
onChange
=
(
e
:
number
)
=>
{}
const
handlePrev
=
()
=>
{
swiperRef
.
current
.
prev
()
}
const
handleNext
=
()
=>
{
swiperRef
.
current
.
next
()
}
useEffect
(()
=>
{
setTimeout
(()
=>
{
const
arr
:
any
=
list
.
slice
()
setList1
(
arr
)
const
arr2
=
list2
.
slice
()
arr2
.
splice
(
1
,
1
)
setList2
(
arr2
)
},
3000
)
},
[])
return
(
<
div
className
=
"demo padding"
>
<
h2
>
基本用法
</
h2
>
<
h2
>
{
translated
.
basic
}
</
h2
>
<
div
className
=
"demo-box"
style
=
{
{
height
:
150
}
}
>
<
Swiper
ref
=
{
swiperRef
}
height
=
{
height
}
paginationColor
=
{
paginationColor
}
autoPlay
=
"2000"
...
...
@@ -42,9 +107,48 @@ const SwiperDemo = () => {
})
}
</
Swiper
>
</
div
>
<
h2
>
自定义大小
</
h2
>
<
h2
>
{
translated
.
asyc
}
</
h2
>
<
div
className
=
"demo-box"
style
=
{
{
height
:
150
}
}
>
<
Swiper
height
=
{
height
}
paginationColor
=
{
paginationColor
}
autoPlay
=
"2000"
initPage
=
{
initPage2
}
onChange
=
{
onChange
}
paginationVisible
>
{
list1
.
map
((
item
)
=>
{
return
(
<
SwiperItem
key
=
{
item
}
>
<
img
src
=
{
item
}
alt
=
""
/>
</
SwiperItem
>
)
})
}
</
Swiper
>
</
div
>
<
h2
>
{
translated
.
dynamicDel
}
</
h2
>
<
div
className
=
"demo-box"
style
=
{
{
height
:
150
}
}
>
<
Swiper
height
=
{
height
}
paginationColor
=
{
paginationColor
}
autoPlay
=
"2000"
initPage
=
{
initPage3
}
onChange
=
{
onChange
}
paginationVisible
>
{
list2
.
map
((
item
)
=>
{
return
(
<
SwiperItem
key
=
{
item
}
>
<
img
src
=
{
item
}
alt
=
""
/>
</
SwiperItem
>
)
})
}
</
Swiper
>
</
div
>
<
h2
>
{
translated
.
size
}
</
h2
>
<
div
className
=
"demo-box"
style
=
{
{
height
:
150
}
}
>
<
Swiper
initPage
=
{
initPage
2
}
width
=
"300"
loop
=
{
false
}
>
<
Swiper
initPage
=
{
initPage
4
}
width
=
"300"
loop
=
{
false
}
>
{
list
.
map
((
item
)
=>
{
return
(
<
SwiperItem
key
=
{
item
}
>
...
...
@@ -54,11 +158,11 @@ const SwiperDemo = () => {
})
}
</
Swiper
>
</
div
>
<
h2
>
自定义指示器
</
h2
>
<
h2
>
{
translated
.
indicator
}
</
h2
>
<
div
className
=
"demo-box"
style
=
{
{
height
:
150
}
}
>
<
Swiper
loop
initPage
=
{
initPage
3
}
initPage
=
{
initPage
5
}
onChange
=
{
(
e
)
=>
setCurrent
(
e
+
1
)
}
pageContent
=
{
<
div
className
=
"page"
>
{
current
}
/4
</
div
>
}
>
...
...
@@ -71,11 +175,37 @@ const SwiperDemo = () => {
})
}
</
Swiper
>
</
div
>
<
h2
>
垂直方向
</
h2
>
<
h2
>
{
translated
.
btns
}
</
h2
>
<
div
className
=
"demo-box"
style
=
{
{
height
:
150
}
}
>
<
Swiper
ref
=
{
swiperRef
}
loop
initPage
=
{
initPage4
}
initPage
=
{
initPage6
}
onChange
=
{
(
e
)
=>
setCurrent2
(
e
+
1
)
}
pageContent
=
{
<
div
className
=
"page"
>
{
current2
}
/4
</
div
>
}
>
{
list
.
map
((
item
)
=>
{
return
(
<
SwiperItem
key
=
{
item
}
>
<
img
src
=
{
item
}
alt
=
""
/>
</
SwiperItem
>
)
})
}
</
Swiper
>
<
div
className
=
"nut-swiper-btns"
>
<
span
className
=
"nut-swiper-btns__left"
onClick
=
{
(
e
)
=>
handlePrev
()
}
>
<
Icon
name
=
"left"
/>
</
span
>
<
span
className
=
"nut-swiper-btns__left"
onClick
=
{
(
e
)
=>
handleNext
()
}
>
<
Icon
name
=
"right"
/>
</
span
>
</
div
>
</
div
>
<
h2
>
{
translated
.
vertical
}
</
h2
>
<
div
className
=
"demo-box vertical-center"
style
=
{
{
height
:
150
}
}
>
<
Swiper
loop
initPage
=
{
initPage7
}
direction
=
"vertical"
autoPlay
=
"3000"
height
=
"150"
...
...
@@ -90,6 +220,47 @@ const SwiperDemo = () => {
})
}
</
Swiper
>
</
div
>
<
h2
>
{
translated
.
horizontalCenter
}
</
h2
>
<
div
className
=
"demo-box "
style
=
{
{
height
:
150
}
}
>
<
Swiper
loop
=
{
false
}
initPage
=
{
initPage8
}
autoPlay
=
"0"
height
=
"150"
paginationVisible
width
=
"280"
isCenter
>
{
list
.
map
((
item
)
=>
{
return
(
<
SwiperItem
key
=
{
item
}
>
<
img
src
=
{
item
}
alt
=
""
/>
</
SwiperItem
>
)
})
}
</
Swiper
>
</
div
>
<
h2
>
{
translated
.
verticalCenter
}
</
h2
>
<
div
className
=
"demo-box vertical-center"
>
<
Swiper
loop
=
{
false
}
initPage
=
{
initPage9
}
direction
=
"vertical"
autoPlay
=
"0"
height
=
"220"
paginationVisible
isCenter
style
=
{
{
height
:
'
280px
'
}
}
>
{
list
.
map
((
item
)
=>
{
return
(
<
SwiperItem
key
=
{
item
}
>
<
img
src
=
{
item
}
alt
=
""
/>
</
SwiperItem
>
)
})
}
</
Swiper
>
</
div
>
</
div
>
)
}
...
...
src/packages/swiper/doc.en-US.md
浏览文件 @
e9c482db
# Swiper
轮播
# Swiper
###
介绍
###
Intro
常用于一组图片或卡片轮播,当内容空间不足时,可以用走马灯的形式进行收纳,进行轮播展现。
Often used in a group of pictures or card rotation.
###
安装
###
Install
```
javascript
import
{
Swiper
,
SwiperItem
}
from
'
@nutui/nutui-react
'
;
```
## 代码演示
###
基础用法
###
Basic Usage
`autoPlay`
自动轮播的时长
`initPage`
初始索引值
`paginationVisible`
是否显示分页指示器
`paginationColor`
指示器颜色自定义
`onChange`
当卡片发生变化
`autoPlay`
Duration of automatic rotation
`initPage`
Initial index value
`paginationVisible`
Show paging indicator
`paginationColor`
Indicator color customization
`onChange`
When the card changes
:::demo
```
tsx
...
...
@@ -32,6 +31,7 @@ const App = () => {
// do something
}
return
(
<
div
className
=
"demo-box"
style
=
{
{
height
:
150
}
}
>
<
Swiper
height
=
{
height
}
paginationColor
=
"#426543"
...
...
@@ -53,14 +53,110 @@ const App = () => {
<
img
src
=
"https://storage.360buyimg.com/jdc-article/fristfabu.jpg"
alt
=
""
/>
</
SwiperItem
>
</
Swiper
>
</
div
>
)
}
export
default
App
;
```
:::
### 自定义大小
### Asynchronous loading
:::demo
```
tsx
import
React
,
{
useState
,
useEffect
}
from
'
react
'
import
{
Swiper
,
SwiperItem
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
const
[
initPage1
,
setInitPage1
]
=
useState
(
0
)
const
[
height
,
setHeight
]
=
useState
<
any
>
(
150
)
const
[
list
,
setList
]
=
useState
<
string
[]
>
([])
useEffect
(()
=>
{
setTimeout
(()
=>
{
const
arr
:
string
[]
=
[
'
https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg
'
,
'
https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg
'
,
'
https://storage.360buyimg.com/jdc-article/welcomenutui.jpg
'
,
'
https://storage.360buyimg.com/jdc-article/fristfabu.jpg
'
]
setList
(
arr
)
},
3000
)
},
[])
return
(
<
div
className
=
"demo-box"
style
=
{
{
height
:
150
}
}
>
<
Swiper
height
=
{
height
}
paginationColor
=
"#426543"
autoPlay
=
"3000"
initPage
=
{
initPage1
}
paginationVisible
>
{
list
.
map
((
item
)
=>
{
return
(
<
SwiperItem
key
=
{
item
}
>
<
img
src
=
{
item
}
alt
=
""
/>
</
SwiperItem
>
)
})
}
</
Swiper
>
</
div
>
)
}
export
default
App
;
```
:::
### Dynamic loading
Support dynamic addition / deletion of pictures
:::demo
```
tsx
import
React
,
{
useState
,
useEffect
}
from
'
react
'
import
{
Swiper
,
SwiperItem
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
const
[
initPage1
,
setInitPage1
]
=
useState
(
0
)
const
[
height
,
setHeight
]
=
useState
<
any
>
(
150
)
const
[
list
,
setList
]
=
useState
<
string
[]
>
([
'
https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg
'
,
'
https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg
'
,
'
https://storage.360buyimg.com/jdc-article/welcomenutui.jpg
'
,
'
https://storage.360buyimg.com/jdc-article/fristfabu.jpg
'
,
])
useEffect
(()
=>
{
setTimeout
(()
=>
{
const
arr
=
list
.
slice
()
arr
.
splice
(
1
,
1
)
setList
(
arr
)
},
3000
)
},
[])
return
(
<
div
className
=
"demo-box"
style
=
{
{
height
:
150
}
}
>
<
Swiper
height
=
{
height
}
paginationColor
=
"#426543"
autoPlay
=
"3000"
initPage
=
{
initPage1
}
paginationVisible
>
{
list
.
map
((
item
)
=>
{
return
(
<
SwiperItem
key
=
{
item
}
>
<
img
src
=
{
item
}
alt
=
""
/>
</
SwiperItem
>
)
})
}
</
Swiper
>
</
div
>
)
}
export
default
App
;
```
:::
### Custom size
`width`
Custom rotation size
`width`
自定义轮播大小
:::demo
```
tsx
import
React
,
{
useState
}
from
'
react
'
...
...
@@ -69,10 +165,12 @@ import { Swiper,SwiperItem } from '@nutui/nutui-react';
const
App
=
()
=>
{
const
[
initPage2
,
setInitPage2
]
=
useState
(
0
)
return
(
<
div
className
=
"demo-box"
style
=
{
{
height
:
150
}
}
>
<
Swiper
width
=
{
300
}
initPage
=
{
initPage2
}
loop
=
{
false
}
height
=
{
150
}
>
<
SwiperItem
>
<
img
src
=
"https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg"
alt
=
""
/>
...
...
@@ -87,15 +185,16 @@ const App = () => {
<
img
src
=
"https://storage.360buyimg.com/jdc-article/fristfabu.jpg"
alt
=
""
/>
</
SwiperItem
>
</
Swiper
>
</
div
>
)
}
export
default
App
;
```
:::
###
自定义分页指示器
###
Custom paging indicator
`pageContent`
表示自定义指示器
`pageContent`
Custom indicator
:::demo
```
tsx
...
...
@@ -109,9 +208,11 @@ const App = () => {
setCurrent
(
e
+
1
)
}
return
(
<
div
className
=
"demo-box"
style
=
{
{
height
:
150
}
}
>
<
Swiper
initPage
=
{
initPage3
}
loop
height
=
{
150
}
onChange
=
{
onChange3
}
pageContent
=
{
<
div
className
=
"page"
>
{
current
}
/4
</
div
>
}
>
...
...
@@ -128,15 +229,108 @@ const App = () => {
<
img
src
=
"https://storage.360buyimg.com/jdc-article/fristfabu.jpg"
alt
=
""
/>
</
SwiperItem
>
</
Swiper
>
</
div
>
)
}
export
default
App
;
```
:::
### Manual switching
You can manually switch through
`api`
(
`prev`
,
`next`
)
:::demo
```
tsx
import
React
,
{
useState
,
useRef
}
from
'
react
'
import
{
Swiper
,
SwiperItem
,
Icon
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
const
swiperRef
=
React
.
useRef
<
any
>
(
null
)
const
[
initPage6
,
setInitPage6
]
=
useState
(
0
)
const
[
current2
,
setCurrent2
]
=
useState
(
1
)
const
onChange3
=
(
e
)
=>
{
setCurrent
(
e
+
1
)
}
const
handlePrev
=
()
=>
{
swiperRef
.
current
.
prev
()
}
const
handleNext
=
()
=>
{
swiperRef
.
current
.
next
()
}
const
pageStyle
=
{
position
:
'
absolute
'
,
bottom
:
0
,
right
:
0
,
width
:
'
46px
'
,
height
:
'
22px
'
,
background
:
'
rgba(0, 0, 0, 0.33)
'
,
borderRadius
:
'
22px
'
,
textAlign
:
'
center
'
,
color
:
'
#fff
'
,
fontSize
:
'
14px
'
,
}
const
btnsStyle
=
{
width
:
'
100%
'
,
position
:
'
absolute
'
,
top
:
'
50%
'
,
transform
:
'
translateY(-15px)
'
,
zIndex
:
1
,
display
:
'
flex
'
,
justifyContent
:
'
space-between
'
,
height
:
'
0px
'
,
}
const
spanStyle
=
{
display
:
'
flex
'
,
alignItems
:
'
center
'
,
justifyContent
:
'
center
'
,
width
:
'
20px
'
,
height
:
'
30px
'
,
backgroundColor
:
'
rgba(0, 0, 0, 0.2)
'
,
}
const
list
=
[
'
https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg
'
,
'
https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg
'
,
'
https://storage.360buyimg.com/jdc-article/welcomenutui.jpg
'
,
'
https://storage.360buyimg.com/jdc-article/fristfabu.jpg
'
]
return
(
<
div
className
=
"demo-box"
style
=
{
{
height
:
'
150px
'
,
position
:
'
relative
'
}
}
>
<
Swiper
height
=
{
150
}
ref
=
{
swiperRef
}
loop
initPage
=
{
initPage6
}
onChange
=
{
(
e
)
=>
setCurrent2
(
e
+
1
)
}
pageContent
=
{
<
div
style
=
{
pageStyle
}
>
{
current2
}
/4
</
div
>
}
>
{
list
.
map
((
item
)
=>
{
return
(
<
SwiperItem
key
=
{
item
}
>
<
img
src
=
{
item
}
alt
=
""
/>
</
SwiperItem
>
)
})
}
</
Swiper
>
<
div
style
=
{
btnsStyle
}
>
<
span
style
=
{
spanStyle
}
onClick
=
{
(
e
)
=>
handlePrev
()
}
>
<
Icon
name
=
"left"
/>
</
span
>
<
span
style
=
{
spanStyle
}
onClick
=
{
(
e
)
=>
handleNext
()
}
>
<
Icon
name
=
"right"
/>
</
span
>
</
div
>
</
div
>
)
}
export
default
App
;
```
:::
###
垂直方向
###
Vertical direction
`direction`
自定义轮播方向
`direction`
Custom rotation direction
:::demo
```
tsx
...
...
@@ -150,6 +344,7 @@ const App = () => {
setCurrent
(
e
+
1
)
}
return
(
<
div
className
=
"demo-box vertical-center"
style
=
{
{
height
:
'
150px
'
}
}
>
<
Swiper
loop
initPage
=
{
initPage4
}
...
...
@@ -171,6 +366,94 @@ const App = () => {
<
img
src
=
"https://storage.360buyimg.com/jdc-article/fristfabu.jpg"
alt
=
""
/>
</
SwiperItem
>
</
Swiper
>
</
div
>
)
}
export
default
App
;
```
:::
### Horizontal center display
`isCenter`
means it can be centered, and
`width`
must be passed at the same time
:::demo
```
tsx
import
React
,
{
useState
}
from
'
react
'
import
{
Swiper
,
SwiperItem
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
const
[
initPage8
,
setInitPage8
]
=
useState
(
0
)
const
list
=
[
'
https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg
'
,
'
https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg
'
,
'
https://storage.360buyimg.com/jdc-article/welcomenutui.jpg
'
,
'
https://storage.360buyimg.com/jdc-article/fristfabu.jpg
'
]
return
(
<
div
className
=
"demo-box "
style
=
{
{
height
:
'
150px
'
}
}
>
<
Swiper
loop
=
{
false
}
initPage
=
{
initPage8
}
autoPlay
=
"0"
height
=
"150"
paginationVisible
width
=
"280"
isCenter
>
{
list
.
map
((
item
)
=>
{
return
(
<
SwiperItem
key
=
{
item
}
>
<
img
src
=
{
item
}
alt
=
""
/>
</
SwiperItem
>
)
})
}
</
Swiper
>
</
div
>
)
}
export
default
App
;
```
:::
### Vertically centered display
`isCenter`
means that it can be centered, and
`height`
must be passed
:::demo
```
tsx
import
React
,
{
useState
}
from
'
react
'
import
{
Swiper
,
SwiperItem
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
const
[
initPage9
,
setInitPage9
]
=
useState
(
0
)
const
list
=
[
'
https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg
'
,
'
https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg
'
,
'
https://storage.360buyimg.com/jdc-article/welcomenutui.jpg
'
,
'
https://storage.360buyimg.com/jdc-article/fristfabu.jpg
'
]
return
(
<
div
className
=
"demo-box vertical-center"
style
=
{
{
height
:
'
150px
'
}
}
>
<
Swiper
loop
=
{
false
}
initPage
=
{
initPage9
}
direction
=
"vertical"
autoPlay
=
"0"
height
=
"220"
paginationVisible
isCenter
style
=
{
{
height
:
'
280px
'
}
}
>
{
list
.
map
((
item
)
=>
{
return
(
<
SwiperItem
key
=
{
item
}
>
<
img
src
=
{
item
}
alt
=
""
/>
</
SwiperItem
>
)
})
}
</
Swiper
>
</
div
>
)
}
export
default
App
;
...
...
@@ -181,36 +464,37 @@ export default App;
### Props
|
参数 | 说明 | 类型 | 默认值
|
|
Attribute | Description | Type | Default
|
| ----------------- | -------------------------------------- | ------------------------- | ----------------- |
| width | 轮播卡片的宽度 | Number
\|
String | window.innerWidth |
| height | 轮播卡片的高度 | String
\|
Number | 0 |
| direction | 轮播方向,可选值
`horizontal`
,
`vertical`
| String | 'horizontal' |
| paginationVisible | 分页指示器是否展示 | Boolean | false |
| paginationColor | 分页指示器选中的颜色 | String | '#fff' |
| loop | 是否循环轮播 | Boolean | true |
| duration | 动画时长(单位是ms) | Number
\|
String | 500 |
| autoPlay | 自动轮播时长,0表示不会自动轮播 | Number
\|
String | 0 |
| initPage | 初始化索引值 | Number
\|
String | 0 |
| touchable | 是否可触摸滑动 | Boolean | true |
| pageContent | 自定义指示器 | String
\|
React.ReactNode | - |
| isPreventDefault | 滑动过程中是否禁用默认事件 | Boolean | true |
| isStopPropagation | 滑动过程中是否禁止冒泡 | Boolean | true |
| width | Width of rotation car | Number
\|
String | window.innerWidth |
| height | Height of rotation card | String
\|
Number | 0 |
| direction | Rotation direction, optional value:
`horizontal`
,
`vertical`
| String | 'horizontal' |
| paginationVisible | Whether the pagination indicator is displayed | Boolean | false |
| paginationColor | Pagination indicator selected color | String | '#fff' |
| loop | Whether to rotate | Boolean | true |
| duration | Animation duration(Unit ms | Number
\|
String | 500 |
| autoPlay | Automatic rotation duration, 0 means no automatic | Number
\|
String | 0 |
| initPage | Initialize index value | Number
\|
String | 0 |
| touchable | Is it possible to touch swipe | Boolean | true |
| pageContent | Custom indicator | String
\|
React.ReactNode | - |
| isPreventDefault | Whether to disable default events during swipe | Boolean | true |
| isStopPropagation | Whether to prohibit bubbling during sliding | Boolean | true |
| isCenter | Whether to display in the center, the corresponding
`width`
and
`height`
must be passed | Boolean | false |
### Events
|
事件名 | 说明 | 回调参数
|
|
Event | Description | Arguments
|
| -------- | ---------------- | --------------- |
| onChange |
卡片切换后的回调 | 当前索引值index
|
| onChange |
Callback after card switching | Current index value
|
### API
|
事件名 | 说明 | 参数
|
|
Event | Description | Arguments
|
| ------ | -------------- | ------------ |
| prev | 切换到上一页 | - |
| next | 切换到下一页 | - |
| to | 切换到指定轮播 | index:number |
\ No newline at end of file
| prev | Switch to previous page | - |
| next | Switch to next page | - |
| to | Switch to the specified rotation | index:number |
\ No newline at end of file
src/packages/swiper/doc.md
浏览文件 @
e9c482db
...
...
@@ -32,6 +32,7 @@ const App = () => {
// do something
}
return
(
<
div
className
=
"demo-box"
style
=
{
{
height
:
150
}
}
>
<
Swiper
height
=
{
height
}
paginationColor
=
"#426543"
...
...
@@ -53,11 +54,107 @@ const App = () => {
<
img
src
=
"https://storage.360buyimg.com/jdc-article/fristfabu.jpg"
alt
=
""
/>
</
SwiperItem
>
</
Swiper
>
</
div
>
)
}
export
default
App
;
```
:::
### 异步加载
:::demo
```
tsx
import
React
,
{
useState
,
useEffect
}
from
'
react
'
import
{
Swiper
,
SwiperItem
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
const
[
initPage1
,
setInitPage1
]
=
useState
(
0
)
const
[
height
,
setHeight
]
=
useState
<
any
>
(
150
)
const
[
list
,
setList
]
=
useState
<
string
[]
>
([])
useEffect
(()
=>
{
setTimeout
(()
=>
{
const
arr
:
string
[]
=
[
'
https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg
'
,
'
https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg
'
,
'
https://storage.360buyimg.com/jdc-article/welcomenutui.jpg
'
,
'
https://storage.360buyimg.com/jdc-article/fristfabu.jpg
'
]
setList
(
arr
)
},
3000
)
},
[])
return
(
<
div
className
=
"demo-box"
style
=
{
{
height
:
150
}
}
>
<
Swiper
height
=
{
height
}
paginationColor
=
"#426543"
autoPlay
=
"3000"
initPage
=
{
initPage1
}
paginationVisible
>
{
list
.
map
((
item
)
=>
{
return
(
<
SwiperItem
key
=
{
item
}
>
<
img
src
=
{
item
}
alt
=
""
/>
</
SwiperItem
>
)
})
}
</
Swiper
>
</
div
>
)
}
export
default
App
;
```
:::
### 动态加载
支持动态增加/删除图片
:::demo
```
tsx
import
React
,
{
useState
,
useEffect
}
from
'
react
'
import
{
Swiper
,
SwiperItem
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
const
[
initPage1
,
setInitPage1
]
=
useState
(
0
)
const
[
height
,
setHeight
]
=
useState
<
any
>
(
150
)
const
[
list
,
setList
]
=
useState
<
string
[]
>
([
'
https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg
'
,
'
https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg
'
,
'
https://storage.360buyimg.com/jdc-article/welcomenutui.jpg
'
,
'
https://storage.360buyimg.com/jdc-article/fristfabu.jpg
'
,
])
useEffect
(()
=>
{
setTimeout
(()
=>
{
const
arr
=
list
.
slice
()
arr
.
splice
(
1
,
1
)
setList
(
arr
)
},
3000
)
},
[])
return
(
<
div
className
=
"demo-box"
style
=
{
{
height
:
150
}
}
>
<
Swiper
height
=
{
height
}
paginationColor
=
"#426543"
autoPlay
=
"3000"
initPage
=
{
initPage1
}
paginationVisible
>
{
list
.
map
((
item
)
=>
{
return
(
<
SwiperItem
key
=
{
item
}
>
<
img
src
=
{
item
}
alt
=
""
/>
</
SwiperItem
>
)
})
}
</
Swiper
>
</
div
>
)
}
export
default
App
;
```
:::
### 自定义大小
`width`
自定义轮播大小
...
...
@@ -69,10 +166,12 @@ import { Swiper,SwiperItem } from '@nutui/nutui-react';
const
App
=
()
=>
{
const
[
initPage2
,
setInitPage2
]
=
useState
(
0
)
return
(
<
div
className
=
"demo-box"
style
=
{
{
height
:
150
}
}
>
<
Swiper
width
=
{
300
}
initPage
=
{
initPage2
}
loop
=
{
false
}
height
=
{
150
}
>
<
SwiperItem
>
<
img
src
=
"https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg"
alt
=
""
/>
...
...
@@ -87,6 +186,7 @@ const App = () => {
<
img
src
=
"https://storage.360buyimg.com/jdc-article/fristfabu.jpg"
alt
=
""
/>
</
SwiperItem
>
</
Swiper
>
</
div
>
)
}
export
default
App
;
...
...
@@ -109,9 +209,11 @@ const App = () => {
setCurrent
(
e
+
1
)
}
return
(
<
div
className
=
"demo-box"
style
=
{
{
height
:
150
}
}
>
<
Swiper
initPage
=
{
initPage3
}
loop
height
=
{
150
}
onChange
=
{
onChange3
}
pageContent
=
{
<
div
className
=
"page"
>
{
current
}
/4
</
div
>
}
>
...
...
@@ -128,6 +230,99 @@ const App = () => {
<
img
src
=
"https://storage.360buyimg.com/jdc-article/fristfabu.jpg"
alt
=
""
/>
</
SwiperItem
>
</
Swiper
>
</
div
>
)
}
export
default
App
;
```
:::
### 手动切换
可通过
`API`
(
`prev`
,
`next`
)进行手动切换
:::demo
```
tsx
import
React
,
{
useState
,
useRef
}
from
'
react
'
import
{
Swiper
,
SwiperItem
,
Icon
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
const
swiperRef
=
React
.
useRef
<
any
>
(
null
)
const
[
initPage6
,
setInitPage6
]
=
useState
(
0
)
const
[
current2
,
setCurrent2
]
=
useState
(
1
)
const
onChange3
=
(
e
)
=>
{
setCurrent
(
e
+
1
)
}
const
handlePrev
=
()
=>
{
swiperRef
.
current
.
prev
()
}
const
handleNext
=
()
=>
{
swiperRef
.
current
.
next
()
}
const
pageStyle
=
{
position
:
'
absolute
'
,
bottom
:
0
,
right
:
0
,
width
:
'
46px
'
,
height
:
'
22px
'
,
background
:
'
rgba(0, 0, 0, 0.33)
'
,
borderRadius
:
'
22px
'
,
textAlign
:
'
center
'
,
color
:
'
#fff
'
,
fontSize
:
'
14px
'
,
}
const
btnsStyle
=
{
width
:
'
100%
'
,
position
:
'
absolute
'
,
top
:
'
50%
'
,
transform
:
'
translateY(-15px)
'
,
zIndex
:
1
,
display
:
'
flex
'
,
justifyContent
:
'
space-between
'
,
height
:
'
0px
'
,
}
const
spanStyle
=
{
display
:
'
flex
'
,
alignItems
:
'
center
'
,
justifyContent
:
'
center
'
,
width
:
'
20px
'
,
height
:
'
30px
'
,
backgroundColor
:
'
rgba(0, 0, 0, 0.2)
'
,
}
const
list
=
[
'
https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg
'
,
'
https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg
'
,
'
https://storage.360buyimg.com/jdc-article/welcomenutui.jpg
'
,
'
https://storage.360buyimg.com/jdc-article/fristfabu.jpg
'
]
return
(
<
div
className
=
"demo-box"
style
=
{
{
height
:
'
150px
'
,
position
:
'
relative
'
}
}
>
<
Swiper
height
=
{
150
}
ref
=
{
swiperRef
}
loop
initPage
=
{
initPage6
}
onChange
=
{
(
e
)
=>
setCurrent2
(
e
+
1
)
}
pageContent
=
{
<
div
style
=
{
pageStyle
}
>
{
current2
}
/4
</
div
>
}
>
{
list
.
map
((
item
)
=>
{
return
(
<
SwiperItem
key
=
{
item
}
>
<
img
src
=
{
item
}
alt
=
""
/>
</
SwiperItem
>
)
})
}
</
Swiper
>
<
div
style
=
{
btnsStyle
}
>
<
span
style
=
{
spanStyle
}
onClick
=
{
(
e
)
=>
handlePrev
()
}
>
<
Icon
name
=
"left"
/>
</
span
>
<
span
style
=
{
spanStyle
}
onClick
=
{
(
e
)
=>
handleNext
()
}
>
<
Icon
name
=
"right"
/>
</
span
>
</
div
>
</
div
>
)
}
export
default
App
;
...
...
@@ -150,6 +345,7 @@ const App = () => {
setCurrent
(
e
+
1
)
}
return
(
<
div
className
=
"demo-box vertical-center"
style
=
{
{
height
:
'
150px
'
}
}
>
<
Swiper
loop
initPage
=
{
initPage4
}
...
...
@@ -171,6 +367,94 @@ const App = () => {
<
img
src
=
"https://storage.360buyimg.com/jdc-article/fristfabu.jpg"
alt
=
""
/>
</
SwiperItem
>
</
Swiper
>
</
div
>
)
}
export
default
App
;
```
:::
### 水平居中展示
`isCenter`
代表可居中,同时必须传
`width`
:::demo
```
tsx
import
React
,
{
useState
}
from
'
react
'
import
{
Swiper
,
SwiperItem
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
const
[
initPage8
,
setInitPage8
]
=
useState
(
0
)
const
list
=
[
'
https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg
'
,
'
https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg
'
,
'
https://storage.360buyimg.com/jdc-article/welcomenutui.jpg
'
,
'
https://storage.360buyimg.com/jdc-article/fristfabu.jpg
'
]
return
(
<
div
className
=
"demo-box "
style
=
{
{
height
:
'
150px
'
}
}
>
<
Swiper
loop
=
{
false
}
initPage
=
{
initPage8
}
autoPlay
=
"0"
height
=
"150"
paginationVisible
width
=
"280"
isCenter
>
{
list
.
map
((
item
)
=>
{
return
(
<
SwiperItem
key
=
{
item
}
>
<
img
src
=
{
item
}
alt
=
""
/>
</
SwiperItem
>
)
})
}
</
Swiper
>
</
div
>
)
}
export
default
App
;
```
:::
### 垂直居中展示
`isCenter`
代表可居中,同时必须传
`height`
:::demo
```
tsx
import
React
,
{
useState
}
from
'
react
'
import
{
Swiper
,
SwiperItem
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
const
[
initPage9
,
setInitPage9
]
=
useState
(
0
)
const
list
=
[
'
https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg
'
,
'
https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg
'
,
'
https://storage.360buyimg.com/jdc-article/welcomenutui.jpg
'
,
'
https://storage.360buyimg.com/jdc-article/fristfabu.jpg
'
]
return
(
<
div
className
=
"demo-box vertical-center"
style
=
{
{
height
:
'
150px
'
}
}
>
<
Swiper
loop
=
{
false
}
initPage
=
{
initPage9
}
direction
=
"vertical"
autoPlay
=
"0"
height
=
"220"
paginationVisible
isCenter
style
=
{
{
height
:
'
280px
'
}
}
>
{
list
.
map
((
item
)
=>
{
return
(
<
SwiperItem
key
=
{
item
}
>
<
img
src
=
{
item
}
alt
=
""
/>
</
SwiperItem
>
)
})
}
</
Swiper
>
</
div
>
)
}
export
default
App
;
...
...
@@ -196,6 +480,7 @@ export default App;
| pageContent | 自定义指示器 | String
\|
React.ReactNode | - |
| isPreventDefault | 滑动过程中是否禁用默认事件 | Boolean | true |
| isStopPropagation | 滑动过程中是否禁止冒泡 | Boolean | true |
| isCenter | 是否居中展示,必须传对应的
`width`
和
`height`
| Boolean | false |
...
...
src/packages/swiper/doc.zh-TW.md
浏览文件 @
e9c482db
...
...
@@ -58,6 +58,97 @@ const App = () => {
export
default
App
;
```
:::
### 异步加载
:::demo
```
tsx
import
React
,
{
useState
,
useEffect
}
from
'
react
'
import
{
Swiper
,
SwiperItem
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
const
[
initPage1
,
setInitPage1
]
=
useState
(
0
)
const
[
height
,
setHeight
]
=
useState
<
any
>
(
150
)
const
[
list
,
setList
]
=
useState
<
string
[]
>
([])
useEffect
(()
=>
{
setTimeout
(()
=>
{
const
arr
:
string
[]
=
[
'
https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg
'
,
'
https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg
'
,
'
https://storage.360buyimg.com/jdc-article/welcomenutui.jpg
'
,
'
https://storage.360buyimg.com/jdc-article/fristfabu.jpg
'
]
setList
(
arr
)
},
3000
)
},
[])
return
(
<
Swiper
height
=
{
height
}
paginationColor
=
"#426543"
autoPlay
=
"3000"
initPage
=
{
initPage1
}
paginationVisible
>
{
list
.
map
((
item
)
=>
{
return
(
<
SwiperItem
key
=
{
item
}
>
<
img
src
=
{
item
}
alt
=
""
/>
</
SwiperItem
>
)
})
}
</
Swiper
>
)
}
export
default
App
;
```
:::
### 动态加载
支持动态增加/删除图片
:::demo
```
tsx
import
React
,
{
useState
,
useEffect
}
from
'
react
'
import
{
Swiper
,
SwiperItem
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
const
[
initPage1
,
setInitPage1
]
=
useState
(
0
)
const
[
height
,
setHeight
]
=
useState
<
any
>
(
150
)
const
[
list
,
setList
]
=
useState
<
string
[]
>
([
'
https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg
'
,
'
https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg
'
,
'
https://storage.360buyimg.com/jdc-article/welcomenutui.jpg
'
,
'
https://storage.360buyimg.com/jdc-article/fristfabu.jpg
'
,
])
useEffect
(()
=>
{
setTimeout
(()
=>
{
const
arr
=
list
.
slice
()
arr
.
splice
(
1
,
1
)
setList
(
arr
)
},
3000
)
},
[])
return
(
<
Swiper
height
=
{
height
}
paginationColor
=
"#426543"
autoPlay
=
"3000"
initPage
=
{
initPage1
}
paginationVisible
>
{
list
.
map
((
item
)
=>
{
return
(
<
SwiperItem
key
=
{
item
}
>
<
img
src
=
{
item
}
alt
=
""
/>
</
SwiperItem
>
)
})
}
</
Swiper
>
)
}
export
default
App
;
```
:::
### 自定义大小
`width`
自定义轮播大小
...
...
@@ -73,6 +164,7 @@ const App = () => {
width
=
{
300
}
initPage
=
{
initPage2
}
loop
=
{
false
}
height
=
{
150
}
>
<
SwiperItem
>
<
img
src
=
"https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg"
alt
=
""
/>
...
...
@@ -112,6 +204,7 @@ const App = () => {
<
Swiper
initPage
=
{
initPage3
}
loop
height
=
{
150
}
onChange
=
{
onChange3
}
pageContent
=
{
<
div
className
=
"page"
>
{
current
}
/4
</
div
>
}
>
...
...
@@ -134,6 +227,98 @@ export default App;
```
:::
### 手动切换
可通过
`API`
(
`prev`
,
`next`
)进行手动切换
:::demo
```
tsx
import
React
,
{
useState
,
useRef
}
from
'
react
'
import
{
Swiper
,
SwiperItem
,
Icon
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
const
swiperRef
=
React
.
useRef
<
any
>
(
null
)
const
[
initPage6
,
setInitPage6
]
=
useState
(
0
)
const
[
current2
,
setCurrent2
]
=
useState
(
1
)
const
onChange3
=
(
e
)
=>
{
setCurrent
(
e
+
1
)
}
const
handlePrev
=
()
=>
{
swiperRef
.
current
.
prev
()
}
const
handleNext
=
()
=>
{
swiperRef
.
current
.
next
()
}
const
pageStyle
=
{
position
:
'
absolute
'
,
bottom
:
0
,
right
:
0
,
width
:
'
46px
'
,
height
:
'
22px
'
,
background
:
'
rgba(0, 0, 0, 0.33)
'
,
borderRadius
:
'
22px
'
,
textAlign
:
'
center
'
,
color
:
'
#fff
'
,
fontSize
:
'
14px
'
,
}
const
btnsStyle
=
{
width
:
'
100%
'
,
position
:
'
absolute
'
,
top
:
'
50%
'
,
transform
:
'
translateY(-15px)
'
,
zIndex
:
1
,
display
:
'
flex
'
,
justifyContent
:
'
space-between
'
,
height
:
'
0px
'
,
}
const
spanStyle
=
{
display
:
'
flex
'
,
alignItems
:
'
center
'
,
justifyContent
:
'
center
'
,
width
:
'
20px
'
,
height
:
'
30px
'
,
backgroundColor
:
'
rgba(0, 0, 0, 0.2)
'
,
}
const
list
=
[
'
https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg
'
,
'
https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg
'
,
'
https://storage.360buyimg.com/jdc-article/welcomenutui.jpg
'
,
'
https://storage.360buyimg.com/jdc-article/fristfabu.jpg
'
]
return
(
<
div
className
=
"demo-box"
style
=
{
{
height
:
'
150px
'
,
position
:
'
relative
'
}
}
>
<
Swiper
height
=
{
150
}
ref
=
{
swiperRef
}
loop
initPage
=
{
initPage6
}
onChange
=
{
(
e
)
=>
setCurrent2
(
e
+
1
)
}
pageContent
=
{
<
div
style
=
{
pageStyle
}
>
{
current2
}
/4
</
div
>
}
>
{
list
.
map
((
item
)
=>
{
return
(
<
SwiperItem
key
=
{
item
}
>
<
img
src
=
{
item
}
alt
=
""
/>
</
SwiperItem
>
)
})
}
</
Swiper
>
<
div
style
=
{
btnsStyle
}
>
<
span
style
=
{
spanStyle
}
onClick
=
{
(
e
)
=>
handlePrev
()
}
>
<
Icon
name
=
"left"
/>
</
span
>
<
span
style
=
{
spanStyle
}
onClick
=
{
(
e
)
=>
handleNext
()
}
>
<
Icon
name
=
"right"
/>
</
span
>
</
div
>
</
div
>
)
}
export
default
App
;
```
:::
### 垂直方向
`direction`
自定义轮播方向
...
...
@@ -177,6 +362,93 @@ export default App;
```
:::
### 水平居中展示
`isCenter`
代表可居中,同时必须传
`width`
:::demo
```
tsx
import
React
,
{
useState
}
from
'
react
'
import
{
Swiper
,
SwiperItem
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
const
[
initPage8
,
setInitPage8
]
=
useState
(
0
)
const
list
=
[
'
https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg
'
,
'
https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg
'
,
'
https://storage.360buyimg.com/jdc-article/welcomenutui.jpg
'
,
'
https://storage.360buyimg.com/jdc-article/fristfabu.jpg
'
]
return
(
<
div
className
=
"demo-box "
style
=
{
{
height
:
'
150px
'
}
}
>
<
Swiper
loop
=
{
false
}
initPage
=
{
initPage8
}
autoPlay
=
"0"
height
=
"150"
paginationVisible
width
=
"280"
isCenter
>
{
list
.
map
((
item
)
=>
{
return
(
<
SwiperItem
key
=
{
item
}
>
<
img
src
=
{
item
}
alt
=
""
/>
</
SwiperItem
>
)
})
}
</
Swiper
>
</
div
>
)
}
export
default
App
;
```
:::
### 垂直居中展示
`isCenter`
代表可居中,同时必须传
`height`
:::demo
```
tsx
import
React
,
{
useState
}
from
'
react
'
import
{
Swiper
,
SwiperItem
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
const
[
initPage9
,
setInitPage9
]
=
useState
(
0
)
const
list
=
[
'
https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg
'
,
'
https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg
'
,
'
https://storage.360buyimg.com/jdc-article/welcomenutui.jpg
'
,
'
https://storage.360buyimg.com/jdc-article/fristfabu.jpg
'
]
return
(
<
div
className
=
"demo-box "
style
=
{
{
height
:
'
150px
'
}
}
>
<
Swiper
loop
=
{
false
}
initPage
=
{
initPage9
}
direction
=
"vertical"
autoPlay
=
"0"
height
=
"220"
paginationVisible
isCenter
style
=
{
{
height
:
'
280px
'
}
}
>
{
list
.
map
((
item
)
=>
{
return
(
<
SwiperItem
key
=
{
item
}
>
<
img
src
=
{
item
}
alt
=
""
/>
</
SwiperItem
>
)
})
}
</
Swiper
>
</
div
>
)
}
export
default
App
;
```
:::
## API
### Props
...
...
@@ -196,6 +468,7 @@ export default App;
| pageContent | 自定义指示器 | String
\|
React.ReactNode | - |
| isPreventDefault | 滑动过程中是否禁用默认事件 | Boolean | true |
| isStopPropagation | 滑动过程中是否禁止冒泡 | Boolean | true |
| isCenter | 是否居中展示,必须传对应的
`width`
和
`height`
| Boolean | false |
...
...
src/packages/swiper/swiper.scss
浏览文件 @
e9c482db
...
...
@@ -30,6 +30,9 @@
}
}
}
&
__pagination-item
{
background-color
:
$swiper-pagination-item-background-color
;
}
&
__pagination-vertical
{
top
:
50%
;
left
:
12px
;
...
...
src/packages/swiper/swiper.tsx
浏览文件 @
e9c482db
...
...
@@ -26,6 +26,7 @@ interface SwiperProps {
touchable
:
boolean
isPreventDefault
:
boolean
isStopPropagation
:
boolean
isCenter
:
boolean
className
?:
string
style
?:
React
.
CSSProperties
pageContent
?:
React
.
ReactNode
...
...
@@ -45,6 +46,7 @@ const defaultProps = {
touchable
:
true
,
isPreventDefault
:
true
,
isStopPropagation
:
true
,
isCenter
:
false
,
className
:
''
,
}
as
SwiperProps
...
...
@@ -72,6 +74,7 @@ export const Swiper = React.forwardRef<
isPreventDefault
,
isStopPropagation
,
autoPlay
,
isCenter
,
...
rest
}
=
propSwiper
const
container
=
useRef
<
any
>
(
null
)
...
...
@@ -87,6 +90,7 @@ export const Swiper = React.forwardRef<
const
isVertical
=
direction
===
'
vertical
'
const
[
rect
,
setRect
]
=
useState
(
null
as
DOMRect
|
null
)
// eslint-disable-next-line prefer-const
let
[
active
,
setActive
]
=
useState
(
0
)
const
[
width
,
setWidth
]
=
useState
(
0
)
const
[
height
,
setHeight
]
=
useState
(
0
)
...
...
@@ -190,7 +194,6 @@ export const Swiper = React.forwardRef<
const
to
=
(
index
:
number
)
=>
{
resettPosition
()
touchReset
()
requestFrame
(()
=>
{
requestFrame
(()
=>
{
_swiper
.
current
.
moving
=
false
...
...
@@ -243,10 +246,8 @@ export const Swiper = React.forwardRef<
props
.
onChange
&&
props
.
onChange
((
targetActive
+
childCount
)
%
childCount
)
}
active
=
targetActive
offset
=
targetOffset
setActive
(
targetActive
)
setOffset
(
targetOffset
)
getStyle
(
targetOffset
)
}
// 确定当前active 元素
...
...
@@ -325,8 +326,22 @@ export const Swiper = React.forwardRef<
})
const
getStyle
=
(
moveOffset
=
offset
)
=>
{
const
target
=
innerRef
.
current
let
_offset
=
0
if
(
!
isCenter
)
{
_offset
=
moveOffset
}
else
{
const
_size
=
isVertical
?
height
:
width
const
val
=
isVertical
?
(
rect
as
DOMRect
).
height
-
_size
:
(
rect
as
DOMRect
).
width
-
_size
_offset
=
moveOffset
+
(
active
===
childCount
-
1
&&
!
props
.
loop
?
-
val
/
2
:
val
/
2
)
}
target
.
style
.
transform
=
`translate3D
${
!
isVertical
?
`(
${
moveOffset
}
px,0,0)`
:
`(0,
${
moveO
ffset
}
px,0)`
!
isVertical
?
`(
${
_offset
}
px,0,0)`
:
`(0,
${
_o
ffset
}
px,0)`
}
`
target
.
style
.
transitionDuration
=
`
${
_swiper
.
current
.
moving
?
0
:
props
.
duration
...
...
@@ -369,7 +384,11 @@ export const Swiper = React.forwardRef<
if
(
isShouldMove
&&
touch
.
stateDirection
===
props
.
direction
)
{
const
offset
=
isVertical
?
touch
.
offsetY
:
touch
.
offsetX
if
(
props
.
loop
)
{
pace
=
offset
>
0
?
(
touch
.
delta
>
0
?
-
1
:
1
)
:
0
if
(
offset
>
0
)
{
pace
=
touch
.
delta
>
0
?
-
1
:
1
}
else
{
pace
=
0
}
}
else
{
pace
=
-
Math
[
touch
.
delta
>
0
?
'
ceil
'
:
'
floor
'
](
touch
.
delta
/
size
)
}
...
...
@@ -426,9 +445,11 @@ export const Swiper = React.forwardRef<
stopAutoPlay
()
autoplay
()
},
[
children
])
useEffect
(()
=>
{
init
()
},
[
propSwiper
.
initPage
])
useEffect
(()
=>
{
const
target
=
container
.
current
target
.
addEventListener
(
'
touchstart
'
,
onTouchStart
,
false
)
...
...
@@ -440,7 +461,12 @@ export const Swiper = React.forwardRef<
target
.
removeEventListener
(
'
touchend
'
,
onTouchEnd
,
false
)
}
})
const
style
=
(
index
:
any
)
=>
{
useEffect
(()
=>
{
return
()
=>
{
stopAutoPlay
()
}
},
[])
const
itemStyle
=
(
index
:
any
)
=>
{
const
style
:
IStyle
=
{}
const
_direction
=
propSwiper
.
direction
||
direction
const
_size
=
size
...
...
@@ -468,7 +494,7 @@ export const Swiper = React.forwardRef<
return
(
<
div
className
=
{
b
(
'
item-wrapper
'
)
}
style
=
{
s
tyle
(
index
)
}
style
=
{
itemS
tyle
(
index
)
}
key
=
{
index
}
>
{
child
}
...
...
@@ -486,12 +512,17 @@ export const Swiper = React.forwardRef<
{
React
.
Children
.
map
(
childs
,
(
item
:
any
,
index
:
number
)
=>
{
return
(
<
i
style
=
{
{
backgroundColor
:
style
=
{
(
active
+
childCount
)
%
childCount
===
index
?
propSwiper
.
paginationColor
:
'
#ddd
'
,
}
}
?
{
backgroundColor
:
propSwiper
.
paginationColor
,
}
:
undefined
}
className
=
{
classNames
({
[
`
${
b
(
'
pagination-item
'
)}
`
]:
true
,
active
:
(
active
+
childCount
)
%
childCount
===
index
,
})
}
key
=
{
index
}
/>
)
...
...
src/packages/swiperitem/swiperitem.tsx
浏览文件 @
e9c482db
import
React
,
{
use
State
,
useContext
,
useImperativeHandle
}
from
'
react
'
import
React
,
{
use
Context
}
from
'
react
'
import
classNames
from
'
classnames
'
import
{
DataContext
}
from
'
@/packages/swiper/UserContext
'
import
bem
from
'
@/utils/bem
'
...
...
@@ -25,15 +25,9 @@ export const SwiperItem = React.forwardRef<
const
_props
=
{
...
defaultProps
,
...
props
}
const
{
children
,
direction
,
size
}
=
_props
const
parent
:
any
=
useContext
(
DataContext
)
const
[
offset
,
setOffset
]
=
useState
(
0
)
const
b
=
bem
(
'
swiper-item
'
)
const
classes
=
classNames
(
b
(
''
))
useImperativeHandle
<
HTMLDivElement
,
any
>
(
ref
,
()
=>
({
changeOffset
:
(
num
:
number
)
=>
{
setOffset
(
num
)
},
}))
const
style
=
()
=>
{
const
style
:
IStyle
=
{}
const
_direction
=
parent
?.
propSwiper
.
direction
||
direction
...
...
src/styles/variables.scss
浏览文件 @
e9c482db
...
...
@@ -69,7 +69,7 @@ $button-primary-background-color: linear-gradient(
$primary-color-end
100%
);
$button-info-color
:
$white
;
$button-info-border-color
:
rgba
(
73
,
106
,
242
,
1
)
;
$button-info-border-color
:
#496af2
;
$button-info-background-color
:
linear-gradient
(
315deg
,
rgba
(
73
,
143
,
242
,
1
)
0%
,
...
...
@@ -495,6 +495,10 @@ $divider-vertical-top: 2px !default;
$divider-vertical-border-left
:
rgba
(
0
,
0
,
0
,
0
.06
)
!
default
;
$divider-vertical-margin
:
0
8px
!
default
;
// swiper
$swiper-pagination-item-background-color
:
#ddd
!
default
;
// Table
$table-border-color
:
#ececec
!
default
;
$table-cols-padding
:
10px
!
default
;
...
...
@@ -524,6 +528,7 @@ $numberkeyboard-key-finish-font-size: 16px !default;
$numberkeyboard-key-finish-font-size-color
:
#fff
!
default
;
$numberkeyboard-key-finish-background-color
:
#1989fa
!
default
;
$numberkeyboard-key-activeFinsh-background-color
:
#0570db
!
default
;
// elevator
$elevator-list-item-highcolor
:
$primary-color
!
default
;
$elevator-list-item-font-size
:
12px
!
default
;
...
...
@@ -591,7 +596,6 @@ $row-content-height: 50px !default;
$row-content-line-height
:
40px
!
default
;
$col-default-margin-bottom
:
15px
!
default
;
// searchbar
$searchbar-background
:
$white
!
default
;
$searchbar-right-out-color
:
$black
!
default
;
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录