Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
W
wisdom-components
Project
Project
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
ReactWeb5
wisdom-components
Commits
8b2770f0
Commit
8b2770f0
authored
Feb 16, 2023
by
周宏民
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
fix: 数据列表轮播优化,数据只有一页时,停止滚动
parent
c10a2614
Show whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
13 additions
and
3 deletions
+13
-3
index.js
packages/base-components/DataCarousel/src/index.js
+13
-3
No files found.
packages/base-components/DataCarousel/src/index.js
View file @
8b2770f0
...
...
@@ -25,6 +25,7 @@ const DataCarousel = ({
onSwiper
,
})
=>
{
const
contentRef
=
useRef
(
null
);
const
swiperRef
=
useRef
(
null
);
const
[
colNum
,
setColNum
]
=
useState
(
0
);
const
[
listData
,
setListData
]
=
useState
([]);
const
[
height
,
setHeight
]
=
useState
(
'100%'
);
...
...
@@ -55,7 +56,15 @@ const DataCarousel = ({
},
[
contentRef
.
current
?.
offsetHeight
,
itemHeight
,
gap
]);
useEffect
(()
=>
{
if
(
colNum
)
{
setListData
(
spliceArr
(
list
,
colNum
)
||
[]);
const
arr
=
spliceArr
(
list
,
colNum
)
||
[];
if
(
swiperRef
.
current
)
{
if
(
arr
.
length
>
1
&&
autoplay
*
1
)
{
swiperRef
.
current
.
autoplay
.
start
();
}
else
{
swiperRef
.
current
.
autoplay
.
stop
();
}
}
setListData
(
arr
);
}
},
[
list
,
colNum
]);
return
(
...
...
@@ -72,7 +81,7 @@ const DataCarousel = ({
<
Swiper
slidesPerView
=
{
1
}
autoplay
=
{
autoplay
autoplay
*
1
&&
listData
.
length
>
1
?
{
delay
:
listData
.
length
>
1
?
autoplay
:
false
,
disableOnInteraction
:
false
,
...
...
@@ -84,12 +93,13 @@ const DataCarousel = ({
direction
=
"vertical"
onSlideChange
=
{(
e
)
=>
{}}
onSwiper
=
{(
swiper
)
=>
{
swiperRef
.
current
=
swiper
;
onSwiper
&&
onSwiper
(
swiper
);
//鼠标悬浮暂停效果
swiper
.
$el
[
0
].
addEventListener
(
'mouseover'
,
()
=>
swiper
.
autoplay
.
stop
());
//鼠标移开后继续自动滚屏效果
swiper
.
$el
[
0
].
addEventListener
(
'mouseleave'
,
()
=>
{
listData
.
length
>
1
&&
autoplay
?
swiper
.
autoplay
.
start
()
:
''
;
listData
.
length
>
1
&&
autoplay
*
1
?
swiper
.
autoplay
.
start
()
:
''
;
});
}}
{...
config
}
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment