Skip to content

Commit 77cf449

Browse files
xiaoyatongxiaoyatong
authored
feat(Swiper): 修订autoplay属性,并在taro版本上对齐了tc属性值 (#3225)
* feat: 修订autoplay属性,并在taro版本上对齐了tc属性值 * refactor: 调整部分代码,修复autoplay * test: fixed * fix: 兼容老版本
1 parent 8ba6dfb commit 77cf449

File tree

19 files changed

+211
-200
lines changed

19 files changed

+211
-200
lines changed

‎src/packages/swiper/__tests__/swiper.spec.tsx

Lines changed: 71 additions & 111 deletions
Original file line numberDiff line numberDiff line change
@@ -4,71 +4,54 @@ import '@testing-library/jest-dom'
44
import Swiper, { SwiperRef } from '../index'
55
import { triggerDrag } from '@/utils/event-mocker'
66

7+
const list = [
8+
'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
9+
'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
10+
'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg',
11+
'https://storage.360buyimg.com/jdc-article/fristfabu.jpg',
12+
]
13+
714
function sleep(delay = 0): Promise<void> {
815
return new Promise((resolve) => {
916
setTimeout(resolve, delay)
1017
})
1118
}
1219

1320
test('should render width and height', () => {
14-
const list = [
15-
'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
16-
'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
17-
'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg',
18-
'https://storage.360buyimg.com/jdc-article/fristfabu.jpg',
19-
]
20-
2121
const onChange = vi.fn()
2222

2323
const Wraper = () => {
2424
const ref = useRef<SwiperRef>(null)
2525
return (
2626
<>
27-
<div
28-
data-testid="prev"
29-
onClick={() => {
30-
ref.current?.prev()
31-
}}
32-
>
27+
<div data-testid="prev" onClick={() => ref.current?.prev()}>
3328
prev
3429
</div>
35-
<div
36-
data-testid="next"
37-
onClick={() => {
38-
ref.current?.next()
39-
}}
40-
>
30+
<div data-testid="next" onClick={() => ref.current?.next()}>
4131
next
4232
</div>
43-
<div
44-
data-testid="to"
45-
onClick={() => {
46-
ref.current?.to(1)
47-
}}
48-
>
33+
<div data-testid="to" onClick={() => ref.current?.to(1)}>
4934
to
5035
</div>
5136
<Swiper
37+
ref={ref}
5238
style={{ width: '375px', height: '150px' }}
53-
autoPlay
5439
defaultValue={0}
55-
onChange={onChange}
56-
ref={ref}
40+
autoplay
5741
indicator
42+
onChange={onChange}
5843
>
59-
{list.map((item) => {
60-
return (
61-
<Swiper.Item key={item}>
62-
<img src={item} alt="" />
63-
</Swiper.Item>
64-
)
65-
})}
44+
{list.map((item) => (
45+
<Swiper.Item key={item}>
46+
<img src={item} alt="" />
47+
</Swiper.Item>
48+
))}
6649
</Swiper>
6750
</>
6851
)
6952
}
7053
const { container, getByTestId } = render(<Wraper />)
71-
const swiper = container.querySelectorAll('.nut-swiper')[0]
54+
const swiper = container.querySelector('.nut-swiper')
7255
expect(swiper).toHaveStyle({
7356
height: '150px',
7457
width: '375px',
@@ -78,15 +61,9 @@ test('should render width and height', () => {
7861
fireEvent.click(getByTestId('prev'))
7962
fireEvent.click(getByTestId('to'))
8063
})
64+
8165
test('should render initpage', () => {
82-
const list = [
83-
'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
84-
'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
85-
'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg',
86-
'https://storage.360buyimg.com/jdc-article/fristfabu.jpg',
87-
]
8866
const onChange = (e: number) => {}
89-
9067
const { container } = render(
9168
<Swiper defaultValue={1} onChange={onChange} loop indicator>
9269
{list.map((item) => {
@@ -98,29 +75,17 @@ test('should render initpage', () => {
9875
})}
9976
</Swiper>
10077
)
101-
const swiper = container.querySelectorAll('.nut-swiper-slide')[0]
78+
const swiper = container.querySelector('.nut-swiper-slide')
10279
expect(swiper).toHaveStyle({
10380
transform: 'translate3d(-100%,0,0)',
10481
})
10582
})
106-
test('should render direction', () => {
107-
const list = [
108-
'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
109-
'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
110-
'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg',
111-
'https://storage.360buyimg.com/jdc-article/fristfabu.jpg',
112-
]
11383

84+
test('should render vertical direction', () => {
11485
const onChange = (e: number) => {}
11586

11687
const { container } = render(
117-
<Swiper
118-
loop
119-
direction="vertical"
120-
defaultValue={1}
121-
onChange={onChange}
122-
indicator
123-
>
88+
<Swiper loop direction="vertical" defaultValue={1} onChange={onChange}>
12489
{list.map((item) => {
12590
return (
12691
<Swiper.Item key={item}>
@@ -130,32 +95,33 @@ test('should render direction', () => {
13095
})}
13196
</Swiper>
13297
)
133-
const swiper = container.querySelectorAll('.nut-swiper-slide')[0]
98+
const swiper = container.querySelector('.nut-swiper-slide')
13499
expect(swiper).toHaveStyle({
135100
transform: 'translate3d(0,-100%,0)',
136101
})
137102
})
103+
138104
test('should render indicator', () => {
139-
const list = [
140-
'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
141-
'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
142-
'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg',
143-
'https://storage.360buyimg.com/jdc-article/fristfabu.jpg',
144-
]
145-
const onChange = (e: number) => {}
105+
const { container } = render(
106+
<Swiper defaultValue={1} indicator>
107+
{list.map((item) => {
108+
return (
109+
<Swiper.Item key={item}>
110+
<img src={item} alt="" />
111+
</Swiper.Item>
112+
)
113+
})}
114+
</Swiper>
115+
)
116+
const indicatorItem = container.querySelectorAll(
117+
'.nut-swiper-indicator .nut-indicator-dot'
118+
)
119+
expect(indicatorItem.length).toEqual(4)
120+
})
146121

122+
test('should render effect', () => {
147123
const { container } = render(
148-
<Swiper
149-
slideSize={300}
150-
defaultValue={1}
151-
onChange={onChange}
152-
indicator
153-
style={{
154-
width: '375px',
155-
'--nutui-indicator-color': '#426543',
156-
'--nutui-indicator-dot-color': '#426ddd',
157-
}}
158-
>
124+
<Swiper defaultValue={1} effect={{ name: 'focus', scale: 1 }}>
159125
{list.map((item) => {
160126
return (
161127
<Swiper.Item key={item}>
@@ -165,25 +131,33 @@ test('should render indicator', () => {
165131
})}
166132
</Swiper>
167133
)
168-
const indicatorItem = container.querySelectorAll('.nut-swiper-indicator-item')
134+
const swiper = container.querySelectorAll('.nut-swiper-slide')[0]
135+
expect(swiper).toHaveStyle({ transform: 'translate3d(-100%,0,0) scale(1)' })
169136
})
170137

171-
test('should render loop and auto-play', async () => {
172-
const list = [
173-
'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
174-
'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
175-
'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg',
176-
'https://storage.360buyimg.com/jdc-article/fristfabu.jpg',
177-
]
178-
const onChange = (e: number) => {}
138+
test('should render auto-play', async () => {
179139
const { container } = render(
180-
<Swiper
181-
style={{ width: '375px' }}
182-
slideSize={300}
183-
defaultValue={0}
184-
onChange={onChange}
185-
autoPlay
186-
>
140+
<Swiper style={{ width: '375px' }} defaultValue={0} autoplay>
141+
{list.map((item) => {
142+
return (
143+
<Swiper.Item key={item}>
144+
<img src={item} alt="" />
145+
</Swiper.Item>
146+
)
147+
})}
148+
</Swiper>
149+
)
150+
const swiper = container.querySelectorAll('.nut-swiper-slide')[0]
151+
await waitFor(() => {
152+
expect(swiper).toHaveStyle({
153+
transform: 'none',
154+
})
155+
})
156+
})
157+
158+
test('should render auto-play width number', async () => {
159+
const { container } = render(
160+
<Swiper style={{ width: '375px' }} defaultValue={0} autoplay={300}>
187161
{list.map((item) => {
188162
return (
189163
<Swiper.Item key={item}>
@@ -200,24 +174,16 @@ test('should render loop and auto-play', async () => {
200174
})
201175
})
202176
})
177+
203178
test('should not allow to drag when touchable is false', () => {
204179
const onChange = vi.fn()
205180
const clickFn = vi.fn()
206-
207-
const list = [
208-
'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
209-
'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
210-
'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg',
211-
'https://storage.360buyimg.com/jdc-article/fristfabu.jpg',
212-
]
213-
214181
const { container } = render(
215182
<Swiper
216183
style={{ width: '375px' }}
217-
slideSize={300}
184+
slideSize={200}
218185
defaultValue={0}
219186
onChange={onChange}
220-
touchable={false}
221187
>
222188
{list.map((item) => {
223189
return (
@@ -228,7 +194,7 @@ test('should not allow to drag when touchable is false', () => {
228194
})}
229195
</Swiper>
230196
)
231-
const swiper = container.querySelectorAll('.nut-swiper')[0]
197+
const swiper = container.querySelector('.nut-swiper')
232198
const swiperItem = container.querySelector('.nut-swiper-slide')
233199
triggerDrag(swiper, 220, 0)
234200
expect(swiperItem).toHaveStyle({
@@ -240,13 +206,8 @@ test('should not allow to drag when touchable is false', () => {
240206
expect(clickFn).toBeCalled()
241207
}
242208
})
209+
243210
test('should not allow to drag when loop is false', async () => {
244-
const list = [
245-
'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
246-
'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
247-
'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg',
248-
'https://storage.360buyimg.com/jdc-article/fristfabu.jpg',
249-
]
250211
let _container: any
251212
act(() => {
252213
const { container } = render(
@@ -255,7 +216,6 @@ test('should not allow to drag when loop is false', async () => {
255216
slideSize={300}
256217
defaultValue={3}
257218
loop={false}
258-
autoPlay
259219
data-testid="swiper_container"
260220
>
261221
{list.map((item) => {

‎src/packages/swiper/demos/h5/demo1.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ const list = [
1010
const Demo1 = () => {
1111
return (
1212
<div className="demo-box" style={{ height: 150 }}>
13-
<Swiper autoPlay loop indicator>
13+
<Swiper autoplay loop indicator>
1414
{list.map((item, index) => {
1515
return (
1616
<Swiper.Item key={item}>

‎src/packages/swiper/demos/taro/demo1.tsx

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -19,17 +19,19 @@ const Demo1 = () => {
1919
console.log(`onChange is trigger ${e}`)
2020
}
2121
return (
22-
<Swiper defaultValue={1} autoPlay indicator onChange={onChange}>
23-
{list.map((item, index) => (
24-
<Swiper.Item key={item}>
25-
<Image
26-
style={{ width: '100%', height: '100%' }}
27-
onClick={() => console.log(index)}
28-
src={item}
29-
/>
30-
</Swiper.Item>
31-
))}
32-
</Swiper>
22+
<>
23+
<Swiper defaultValue={2} autoplay indicator onChange={onChange}>
24+
{list.map((item, index) => (
25+
<Swiper.Item key={item}>
26+
<Image
27+
style={{ width: '100%', height: '100%' }}
28+
onClick={() => console.log(index)}
29+
src={item}
30+
/>
31+
</Swiper.Item>
32+
))}
33+
</Swiper>
34+
</>
3335
)
3436
}
3537
export default Demo1

‎src/packages/swiper/demos/taro/demo5.tsx

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,24 @@ function Demo5() {
4444
setCurrent2(e.detail.current)
4545
}}
4646
indicator={
47-
<View className="page">
47+
<View
48+
style={{
49+
display: 'flex',
50+
flexDirection: 'row',
51+
justifyContent: 'center',
52+
alignItems: 'center',
53+
position: 'absolute',
54+
left: '85%',
55+
top: pxTransform(120),
56+
width: pxTransform(46),
57+
height: pxTransform(22),
58+
backgroundColor: 'rgba(0, 0, 0, 0.33)',
59+
borderRadius: pxTransform(22),
60+
textAlign: 'center',
61+
fontSize: pxTransform(14),
62+
zIndex: 1,
63+
}}
64+
>
4865
<Text>
4966
{current2 + 1}/{list.length}
5067
</Text>

‎src/packages/swiper/demos/taro/demo7.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
1-
import React, { useState } from 'react'
1+
import React from 'react'
22
import { Swiper } from '@nutui/nutui-react-taro'
33
import { Image } from '@tarojs/components'
44

55
const Demo7 = () => {
6-
const [initPage8, setInitPage8] = useState(0)
76
const list = [
87
'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
98
'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',

‎src/packages/swiper/demos/taro/demo8.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ const Demo8 = () => {
1010
'https://storage.360buyimg.com/jdc-article/fristfabu.jpg',
1111
]
1212
return (
13-
<View className="demo-box vertical-center">
13+
<View>
1414
<Swiper
1515
defaultValue={0}
1616
direction="vertical"

‎src/packages/swiper/demos/taro/demo9.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ const Demo9 = () => {
77
<Swiper
88
height={pxTransform(120)}
99
loop
10-
autoPlay
10+
autoplay
1111
style={{
1212
justifyContent: 'flex-start',
1313
alignItems: 'flex-start',

0 commit comments

Comments
 (0)