Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
students
travel
Commits
c939c851
Commit
c939c851
authored
Jul 13, 2022
by
백승민
Browse files
slide pagination example
parent
8029729e
Changes
3
Show whitespace changes
Inline
Side-by-side
frontend/src/Pages/picpagination.tsx
View file @
c939c851
...
...
@@ -3,18 +3,20 @@ import React from "react";
type
num
=
{
total
:
number
,
page
:
number
,
setPage
:
Function
setPage
:
Function
}
export
function
PaginationLeft
({
total
,
page
,
setPage
}
:
num
)
{
export
function
PaginationLeft
({
total
,
page
,
setPage
}
:
num
)
{
const
numPages
=
Math
.
ceil
(
total
/
15
);
// export function PaginationLeft ({ page, setPage} : num) {
// const numPages = 3
const
left
=
()
=>
{
setPage
(
page
-
1
)
};
return
(
<
div
>
<
button
onClick
=
{
()
=>
setPage
(
page
-
1
)
}
disabled
=
{
page
===
1
}
>
<
{
page
}
</
button
>
<
button
onClick
=
{
left
}
disabled
=
{
page
===
1
}
>
<
{
page
}
</
button
>
{
/* {Array(numPages)
.fill(1)
...
...
@@ -26,14 +28,16 @@ export function PaginationLeft ({total, page, setPage} : num) {
</
div
>
);
};
export
function
PaginationRight
({
total
,
page
,
setPage
}
:
num
)
{
export
function
PaginationRight
({
total
,
page
,
setPage
}
:
num
)
{
const
numPages
=
Math
.
ceil
(
total
/
15
);
// export function PaginationRight ({ page, setPage} : num) {
// const numPages = 3;
const
right
=
()
=>
{
setPage
(
page
+
1
)
};
return
(
<
div
>
<
button
onClick
=
{
()
=>
setPage
(
page
+
1
)
}
disabled
=
{
page
===
numPages
}
>
<
button
onClick
=
{
right
}
disabled
=
{
page
===
numPages
}
>
>
</
button
>
</
div
>
...
...
frontend/src/home/body.tsx
View file @
c939c851
import
React
,
{
useEffect
,
MouseEvent
,
useState
}
from
"
react
"
;
import
React
,
{
useEffect
,
MouseEvent
,
useState
,
useRef
}
from
"
react
"
;
import
{
Outlet
,
useSearchParams
}
from
"
react-router-dom
"
;
import
Theme
from
"
./theme
"
;
import
Citylist
from
"
../Pages/citylist
"
;
...
...
@@ -14,7 +14,7 @@ export default function Body() {
const
offset1
=
(
page
-
1
)
*
limit
;
const
offset2
=
page
*
limit
;
const
offset3
=
(
page
+
1
)
*
limit
;
//
const
[selected, setSelected] = useState(1);
const
renderRef
=
useRef
()
as
React
.
MutableRefObject
<
HTMLDivElement
>
let
getPics
=
getPicure
();
useEffect
(()
=>
{
...
...
@@ -22,6 +22,11 @@ export default function Body() {
setSearchParams
(
searchParams
)
},
[]);
useEffect
(()
=>
{
renderRef
.
current
.
style
.
transition
=
"
all 0.5s ease-in-out
"
renderRef
.
current
.
style
.
transform
=
`translateX(-
${
page
-
1
}
00%)`
},
[
page
]);
const
themeHandleClick
=
(
event
:
MouseEvent
<
HTMLButtonElement
>
)
=>
{
console
.
log
(
`theme id=
${
event
.
currentTarget
.
id
}
`
);
setSearchParams
({
...
...
@@ -66,14 +71,13 @@ export default function Body() {
<
Citylist
handleClick
=
{
cityHandleClick
}
/>
</
div
>
<
div
className
=
"flex flex-col overflow-hidden"
>
<
div
>
<
PaginationLeft
total
=
{
Idpics
.
length
}
page
=
{
page
}
setPage
=
{
setPage
}
/>
<
PaginationRight
total
=
{
Idpics
.
length
}
page
=
{
page
}
setPage
=
{
setPage
}
/>
<
/
div
>
<
div
className
=
" md:mr-10 md:basis-4/5 flex flex-row transition duration-500 relative w-full "
style
=
{
{
"
transform
"
:
'
translate(-
'
+
(
page
-
1
)
*
100
+
'
%)
'
}
}
>
<
div
className
=
"min-w-full"
>
<
div
className
=
" md:mr-10 md:basis-4/5 flex flex-row relative w-full "
ref
=
{
renderRef
}
>
{
/*
<div className=" md:mr-10 md:basis-4/5 flex flex-row transition duration-500 relative w-full " style={{"transform"
:
"
translate(-
"+
(page
-1)*100+"%)"}}> */
}
<
div
className
=
"min-w-full"
>
<
div
className
=
"inline-grid grid-cols-5"
>
{
Idpics
.
slice
(
0
,
15
).
map
((
pic
,
index
:
number
)
=>
(
{
Idpics
.
slice
(
offset1
,
offset1
+
limit
).
map
((
pic
,
index
:
number
)
=>
(
<
div
className
=
"m-1 shrink-0 bg-gray-200 rounded shadow-md"
...
...
@@ -88,9 +92,9 @@ export default function Body() {
))
}
</
div
>
</
div
>
<
div
className
=
"min-w-full"
>
<
div
className
=
"min-w-full"
>
<
div
className
=
"inline-grid grid-rows-3 grid-cols-5"
>
{
Idpics
.
slice
(
offset2
,
offset2
+
limit
).
map
((
pic
,
index
:
number
)
=>
(
{
Idpics
.
slice
(
offset2
,
offset2
+
limit
).
map
((
pic
,
index
:
number
)
=>
(
<
div
className
=
"m-1 shrink-0 bg-gray-200 rounded shadow-md"
...
...
@@ -106,9 +110,9 @@ export default function Body() {
))
}
</
div
>
</
div
>
<
div
className
=
"min-w-full"
>
<
div
className
=
"min-w-full"
>
<
div
className
=
"inline-grid grid-rows-3 grid-cols-5"
>
{
Idpics
.
slice
(
offset3
,
offset3
+
limit
).
map
((
pic
,
index
:
number
)
=>
(
{
Idpics
.
slice
(
offset3
,
offset3
+
limit
).
map
((
pic
,
index
:
number
)
=>
(
<
div
className
=
"m-1 shrink-0 bg-gray-200 rounded shadow-md"
...
...
@@ -133,3 +137,4 @@ export default function Body() {
// Body Page
);
}
frontend/tailwind.config.js
View file @
c939c851
...
...
@@ -2,23 +2,6 @@
module
.
exports
=
{
content
:
[
"
./src/**/*.{html,js,jsx,ts,tsx}
"
],
theme
:
{
extend
:
{
keyframes
:
{
wave
:
{
'
0%
'
:
{
left
:
'
100%
'
},
'
4%
'
:
{
left
:
'
0
'
},
'
33.33%
'
:
{
left
:
'
0
'
},
'
37.33%
'
:
{
left
:
'
-100%
'
},
'
66.66%
'
:
{
left
:
'
-100%
'
},
'
70.66%
'
:
{
left
:
'
-200%
'
},
'
99.99%
'
:
{
left
:
'
-200%
'
},
'
100%
'
:
{
left
:
'
0%
'
},
}
},
animation
:
{
wave
:
'
wave 12s ease-in-out
'
}
},
},
extend
:
{},
plugins
:
[],
};
}
};
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