chargement async des items dans "morceaux" se fait sur le scroll down (pu besoin de boutton)
This commit is contained in:
parent
81ff4ad4f7
commit
2c47f52fce
@ -94,7 +94,15 @@ const Morceaux = () => {
|
|||||||
const json = await response.json();
|
const json = await response.json();
|
||||||
setProducts([...json]);
|
setProducts([...json]);
|
||||||
setIsLoading(false);
|
setIsLoading(false);
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleScroll = async (e) => {
|
||||||
|
const target = e.target;
|
||||||
|
if (!isLoading && !isSearch) {
|
||||||
|
if (target.scrollTop + target.clientHeight + 300 >= target.scrollHeight) {
|
||||||
|
await handleNextItems();
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -103,20 +111,21 @@ const Morceaux = () => {
|
|||||||
<div className='filters-container'>
|
<div className='filters-container'>
|
||||||
<Filters onChange={handleFilters} />
|
<Filters onChange={handleFilters} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="sorting-container">
|
<div className="sorting-container">
|
||||||
<Sorting onChange={handleOrder} />
|
<Sorting onChange={handleOrder} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="morceaux-container">
|
<div className="morceaux-container" onScroll={(e) => handleScroll(e)} >
|
||||||
<ItemList items={products} />
|
<ItemList items={products} />
|
||||||
</div>
|
</div>
|
||||||
<div className={isLoading ? "cat-load" : "d-none cat-load"} />
|
<div className={isLoading ? "cat-load" : "d-none cat-load"} />
|
||||||
<script type="text/javascript" async src="https://tenor.com/embed.js"></script>
|
<script type="text/javascript" async src="https://tenor.com/embed.js"></script>
|
||||||
<div>
|
{/* <div>
|
||||||
{!isSearch && <Button onClick={handleNextItems} className='btn-load-more'>
|
{!isSearch && <Button onClick={handleNextItems} className='btn-load-more'>
|
||||||
...
|
...
|
||||||
</Button>}
|
</Button>}
|
||||||
</div>
|
</div> */}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -469,6 +469,36 @@ html {
|
|||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* width */
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Track */
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background: beige;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Handle */
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: plum;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Handle on hover */
|
||||||
|
::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: purple;
|
||||||
|
}
|
||||||
|
|
||||||
|
.morceaux-container{
|
||||||
|
padding-top:10px;
|
||||||
|
height: 620px;
|
||||||
|
overflow-y: scroll;
|
||||||
|
border: purple 2px solid;
|
||||||
|
border-radius: 5px;
|
||||||
|
background-color: rgba(245, 245, 220, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
.filters-btn-container{
|
.filters-btn-container{
|
||||||
width:100%;
|
width:100%;
|
||||||
display:flex;
|
display:flex;
|
||||||
@ -723,6 +753,11 @@ html {
|
|||||||
/* -------------------------------------------------------- */
|
/* -------------------------------------------------------- */
|
||||||
|
|
||||||
@media (max-width:450px) {
|
@media (max-width:450px) {
|
||||||
|
|
||||||
|
.morceaux-container{
|
||||||
|
height: 450px;
|
||||||
|
}
|
||||||
|
|
||||||
.item {
|
.item {
|
||||||
width: 85%;
|
width: 85%;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user