Skip to content

GitLab

Commit c939c851 authored by 백승민's avatar 백승민
Browse files

slide pagination example

parent 8029729e
Hide whitespace changes
Inline Side-by-side
frontend/src/Pages/picpagination.tsx
View file @ c939c851
...@@ -3,18 +3,20 @@ import React from "react"; ...@@ -3,18 +3,20 @@ import React from "react";
type num = { type num = {
total: number, total: number,
page: 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); const numPages = Math.ceil(total / 15);
// export function PaginationLeft ({ page, setPage} : num) {
// const numPages = 3 const left =()=>{
setPage(page - 1)
};
return ( return (
<div> <div>
<button onClick={() => setPage(page - 1)} disabled={page === 1}> <button onClick={left} disabled={page === 1}>
&lt;{page} &lt;{page}</button>
</button>
{/* {Array(numPages) {/* {Array(numPages)
.fill(1) .fill(1)
...@@ -26,14 +28,16 @@ export function PaginationLeft ({total, page, setPage} : num) { ...@@ -26,14 +28,16 @@ export function PaginationLeft ({total, page, setPage} : num) {
</div> </div>
); );
}; };
export function PaginationRight ({total, page, setPage} : num) { export function PaginationRight ({total, page,setPage} : num) {
const numPages = Math.ceil(total / 15); const numPages = Math.ceil(total / 15);
// export function PaginationRight ({ page, setPage} : num) {
// const numPages = 3; const right =()=>{
setPage(page + 1)
};
return ( return (
<div> <div>
<button onClick={() => setPage(page + 1)} disabled={page === numPages}> <button onClick={right} disabled={page === numPages}>
&gt; &gt;
</button> </button>
</div> </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 { Outlet, useSearchParams } from "react-router-dom";
import Theme from "./theme"; import Theme from "./theme";
import Citylist from "../Pages/citylist"; import Citylist from "../Pages/citylist";
...@@ -14,7 +14,7 @@ export default function Body() { ...@@ -14,7 +14,7 @@ export default function Body() {
const offset1 = (page - 1) * limit; const offset1 = (page - 1) * limit;
const offset2 = page * limit; const offset2 = page * limit;
const offset3 = (page + 1) * limit; const offset3 = (page + 1) * limit;
// const [selected, setSelected] = useState(1); const renderRef = useRef() as React.MutableRefObject<HTMLDivElement>
let getPics = getPicure(); let getPics = getPicure();
useEffect(() => { useEffect(() => {
...@@ -22,6 +22,11 @@ export default function Body() { ...@@ -22,6 +22,11 @@ export default function Body() {
setSearchParams(searchParams) 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>) => { const themeHandleClick = (event: MouseEvent<HTMLButtonElement>) => {
console.log(`theme id= ${event.currentTarget.id}`); console.log(`theme id= ${event.currentTarget.id}`);
setSearchParams({ setSearchParams({
...@@ -65,62 +70,61 @@ export default function Body() { ...@@ -65,62 +70,61 @@ export default function Body() {
<div className="w-50"> <div className="w-50">
<Citylist handleClick={cityHandleClick} /> <Citylist handleClick={cityHandleClick} />
</div> </div>
<div className="flex flex-col overflow-hidden"> <div className="flex flex-col overflow-hidden">
<div> <PaginationLeft total={Idpics.length} page={page} setPage={setPage} />
<PaginationLeft total={Idpics.length} page={page} setPage={setPage} /> <PaginationRight total={Idpics.length} page={page} setPage={setPage} />
<PaginationRight total={Idpics.length} page={page} setPage={setPage} /> <div className=" md:mr-10 md:basis-4/5 flex flex-row relative w-full " ref={renderRef}>
</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=" 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= "min-w-full">
<div className="inline-grid grid-cols-5"> <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 <div
className="m-1 shrink-0 bg-gray-200 rounded shadow-md" className="m-1 shrink-0 bg-gray-200 rounded shadow-md"
key={index}> key={index}>
<img <img
src={pic.url} src={pic.url}
className="w-full h-10 md:h-20 object-center" className="w-full h-10 md:h-20 object-center"
/> />
<p className="text-center text-xs">{pic.name}</p> <p className="text-center text-xs">{pic.name}</p>
</div> </div>
))} ))}
</div> </div>
</div> </div>
<div className= "min-w-full"> <div className="min-w-full">
<div className="inline-grid grid-rows-3 grid-cols-5"> <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 <div
className="m-1 shrink-0 bg-gray-200 rounded shadow-md" className="m-1 shrink-0 bg-gray-200 rounded shadow-md"
key={index} key={index}
> >
<img <img
src={pic.url} src={pic.url}
className="w-full h-10 md:h-20 object-center" className="w-full h-10 md:h-20 object-center"
/> />
<p className="text-center text-xs">{pic.name}</p> <p className="text-center text-xs">{pic.name}</p>
</div> </div>
))} ))}
</div> </div>
</div> </div>
<div className= "min-w-full"> <div className="min-w-full">
<div className="inline-grid grid-rows-3 grid-cols-5"> <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 <div
className="m-1 shrink-0 bg-gray-200 rounded shadow-md" className="m-1 shrink-0 bg-gray-200 rounded shadow-md"
key={index} key={index}
> >
<img <img
src={pic.url} src={pic.url}
className="w-full h-10 md:h-20 object-center" className="w-full h-10 md:h-20 object-center"
/> />
<p className="text-center text-xs">{pic.name}</p> <p className="text-center text-xs">{pic.name}</p>
</div> </div>
))} ))}
</div> </div>
</div> </div>
...@@ -133,3 +137,4 @@ export default function Body() { ...@@ -133,3 +137,4 @@ export default function Body() {
// Body Page // Body Page
); );
} }
frontend/tailwind.config.js
View file @ c939c851
...@@ -2,23 +2,6 @@ ...@@ -2,23 +2,6 @@
module.exports = { module.exports = {
content: ["./src/**/*.{html,js,jsx,ts,tsx}"], content: ["./src/**/*.{html,js,jsx,ts,tsx}"],
theme: { theme: {
extend: { 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'
}
},
},
plugins: [], plugins: [],
}; }};
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment