修复空间Tab切换
This commit is contained in:
al
parent
556ef80e5e
commit
9192651354
|
|
@ -51,6 +51,7 @@ export default function Space() {
|
||||||
}, []);
|
}, []);
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
firstRequest();
|
firstRequest();
|
||||||
|
setDataList([]);
|
||||||
}, [activeIndex]);
|
}, [activeIndex]);
|
||||||
const firstRequest = () => {
|
const firstRequest = () => {
|
||||||
resetOffset();
|
resetOffset();
|
||||||
|
|
@ -65,7 +66,6 @@ export default function Space() {
|
||||||
};
|
};
|
||||||
const resetOffset = () => {
|
const resetOffset = () => {
|
||||||
setOffset(0);
|
setOffset(0);
|
||||||
// setDataList([]);
|
|
||||||
};
|
};
|
||||||
const getSpaceList = async () => {
|
const getSpaceList = async () => {
|
||||||
// setLoading(true);
|
// setLoading(true);
|
||||||
|
|
@ -136,7 +136,7 @@ export default function Space() {
|
||||||
onChange={(key) => {
|
onChange={(key) => {
|
||||||
const index = tabItems.findIndex((item) => item.key === key);
|
const index = tabItems.findIndex((item) => item.key === key);
|
||||||
setActiveIndex(index);
|
setActiveIndex(index);
|
||||||
// swiperRef.current?.swipeTo(index);
|
swiperRef.current?.swipeTo(index);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{tabItems.map((item) => (
|
{tabItems.map((item) => (
|
||||||
|
|
@ -155,132 +155,131 @@ export default function Space() {
|
||||||
<OwnIcon src="/icons/search.png" className="w-9 h-9" />
|
<OwnIcon src="/icons/search.png" className="w-9 h-9" />
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
|
{}
|
||||||
<Swiper
|
<Swiper
|
||||||
direction="horizontal"
|
direction="horizontal"
|
||||||
indicator={() => null}
|
indicator={() => null}
|
||||||
// ref={swiperRef}
|
ref={swiperRef}
|
||||||
defaultIndex={activeIndex}
|
defaultIndex={activeIndex}
|
||||||
|
allowTouchMove={false}
|
||||||
onIndexChange={(index) => {
|
onIndexChange={(index) => {
|
||||||
setActiveIndex(index);
|
setActiveIndex(index);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Swiper.Item>
|
<Swiper.Item>
|
||||||
{!activeIndex && (
|
<div>
|
||||||
<div>
|
{!loading ? (
|
||||||
{!loading ? (
|
// <div className="px-4 pb-8">
|
||||||
// <div className="px-4 pb-8">
|
|
||||||
|
|
||||||
// </div>
|
// </div>
|
||||||
<>
|
<>
|
||||||
{dataList?.length > 0 ? (
|
{dataList?.length > 0 ? (
|
||||||
<div className="px-4 pb-20">
|
<div className="px-4 pb-20">
|
||||||
<ul className="grid grid-cols-2 gap-2 overflow-y-auto">
|
<ul className="grid grid-cols-2 gap-2 overflow-y-auto">
|
||||||
{dataList?.map((item) => (
|
{dataList?.map((item) => (
|
||||||
<li key={item.id}>
|
<li key={item.id}>
|
||||||
<VisitingCard data={item} />
|
<VisitingCard data={item} />
|
||||||
</li>
|
</li>
|
||||||
))}
|
))}
|
||||||
<li onClick={() => router.push("/search")}>
|
<li onClick={() => router.push("/search")}>
|
||||||
|
<div
|
||||||
|
// onPress={() => navigation.navigate("Stream")}
|
||||||
|
// onClick={}
|
||||||
|
className="w-full h-52"
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
// onPress={() => navigation.navigate("Stream")}
|
className="h-full flex flex-col rounded-lg overflow-hidden bg-[#FFFFFF1A] bg-no-repeat bg-right-bottom bg-40%"
|
||||||
// onClick={}
|
style={{
|
||||||
className="w-full h-52"
|
backgroundImage: `url(${
|
||||||
|
process.env.NEXT_PUBLIC_WEB_ASSETS_URL +
|
||||||
|
"/icons/magnifier.png"
|
||||||
|
})`,
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
<div
|
{/* <div className="w-full z-0"></div>
|
||||||
className="h-full flex flex-col rounded-lg overflow-hidden bg-[#FFFFFF1A] bg-no-repeat bg-right-bottom bg-40%"
|
|
||||||
style={{
|
|
||||||
backgroundImage: `url(${
|
|
||||||
process.env.NEXT_PUBLIC_WEB_ASSETS_URL +
|
|
||||||
"/icons/magnifier.png"
|
|
||||||
})`,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{/* <div className="w-full z-0"></div>
|
|
||||||
<div
|
<div
|
||||||
className="w-full z-0 h-[42px]"
|
className="w-full z-0 h-[42px]"
|
||||||
></div> */}
|
></div> */}
|
||||||
<div className="flex flex-col w-full h-full px-[22px] py-[30px]">
|
<div className="flex flex-col w-full h-full px-[22px] py-[30px]">
|
||||||
<p className="text-white font-medium text-lg">
|
<p className="text-white font-medium text-lg">
|
||||||
发现更多
|
发现更多
|
||||||
</p>
|
</p>
|
||||||
<p className="text-[#FFFFFF40] font-sm">
|
<p className="text-[#FFFFFF40] font-sm">
|
||||||
缘分就在不经意间
|
缘分就在不经意间
|
||||||
</p>
|
</p>
|
||||||
<OwnIcon
|
<OwnIcon
|
||||||
className="w-full h-full"
|
className="w-full h-full"
|
||||||
outClassName="w-[32px] h-[32px] mt-4"
|
outClassName="w-[32px] h-[32px] mt-4"
|
||||||
src="/icons/rightarrow_border.png"
|
src="/icons/rightarrow_border.png"
|
||||||
/>
|
/>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</div>
|
||||||
</ul>
|
</li>
|
||||||
</div>
|
</ul>
|
||||||
) : (
|
</div>
|
||||||
<div
|
) : (
|
||||||
className={`flex flex-col items-center justify-center`}
|
<div
|
||||||
style={{ height: `calc(100vh - 120px)` }}
|
className={`flex flex-col items-center justify-center`}
|
||||||
>
|
style={{ height: `calc(100vh - 120px)` }}
|
||||||
<Empty type="nospace" />
|
>
|
||||||
<div className="flex flex-col mt-6">
|
<Empty type="nospace" />
|
||||||
<Link
|
<div className="flex flex-col mt-6">
|
||||||
href="search"
|
<Link
|
||||||
className="bg-[#FFFFFF40] px-12 py-2 rounded-full text-base text-white"
|
href="search"
|
||||||
>
|
className="bg-[#FFFFFF40] px-12 py-2 rounded-full text-base text-white"
|
||||||
搜索空间
|
>
|
||||||
</Link>
|
搜索空间
|
||||||
{/* <Link
|
</Link>
|
||||||
|
{/* <Link
|
||||||
href="search"
|
href="search"
|
||||||
className="bg-[#FFFFFF40] px-12 py-2 rounded-full text-base text-white mt-2"
|
className="bg-[#FFFFFF40] px-12 py-2 rounded-full text-base text-white mt-2"
|
||||||
>
|
>
|
||||||
查看推荐
|
查看推荐
|
||||||
</Link> */}
|
</Link> */}
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
</div>
|
||||||
</>
|
)}
|
||||||
) : (
|
</>
|
||||||
<div
|
) : (
|
||||||
className="w-full text-center flex items-center justify-center h-screen"
|
<div
|
||||||
// style={{ height: scrollHeight - 60 + "px" }}
|
className="w-full text-center flex items-center justify-center h-screen"
|
||||||
>
|
// style={{ height: scrollHeight - 60 + "px" }}
|
||||||
<SpinLoading />
|
>
|
||||||
</div>
|
<SpinLoading />
|
||||||
)}
|
</div>
|
||||||
</div>
|
)}
|
||||||
)}
|
</div>
|
||||||
</Swiper.Item>
|
</Swiper.Item>
|
||||||
<Swiper.Item>
|
<Swiper.Item>
|
||||||
{!!activeIndex && (
|
<div className="px-4 pb-20">
|
||||||
<div className="px-4 pb-20">
|
<List className="scrollbarBox_hidden">
|
||||||
<List className="scrollbarBox_hidden">
|
{loading && !dataList.length && (
|
||||||
{loading && !dataList.length && (
|
<>
|
||||||
<>
|
<PostItemSkeleton />
|
||||||
<PostItemSkeleton />
|
<PostItemSkeleton />
|
||||||
<PostItemSkeleton />
|
<PostItemSkeleton />
|
||||||
<PostItemSkeleton />
|
<PostItemSkeleton />
|
||||||
<PostItemSkeleton />
|
</>
|
||||||
</>
|
)}
|
||||||
)}
|
{dataList?.map((item, index) => (
|
||||||
{dataList?.map((item, index) => (
|
<List.Item className="!p-0" key={item.id + "_" + index}>
|
||||||
<List.Item className="!p-0" key={item.id + "_" + index}>
|
<PostItem
|
||||||
<PostItem
|
type="space"
|
||||||
type="space"
|
data={item}
|
||||||
data={item}
|
date={new Date(item.ct * 1000)}
|
||||||
date={new Date(item.ct * 1000)}
|
|
||||||
/>
|
|
||||||
</List.Item>
|
|
||||||
))}
|
|
||||||
<InfiniteScroll loadMore={loadMore} hasMore={hasMore}>
|
|
||||||
<InfiniteScrollContent
|
|
||||||
hasMore={hasMore}
|
|
||||||
isEmpty={dataList.length === 0}
|
|
||||||
showNoMore={!dataList.length}
|
|
||||||
/>
|
/>
|
||||||
</InfiniteScroll>
|
</List.Item>
|
||||||
</List>
|
))}
|
||||||
{/* {!dataList?.length && (
|
<InfiniteScroll loadMore={loadMore} hasMore={hasMore}>
|
||||||
|
<InfiniteScrollContent
|
||||||
|
hasMore={hasMore}
|
||||||
|
isEmpty={dataList.length === 0}
|
||||||
|
showNoMore={!dataList.length}
|
||||||
|
/>
|
||||||
|
</InfiniteScroll>
|
||||||
|
</List>
|
||||||
|
{/* {!dataList?.length && (
|
||||||
<div
|
<div
|
||||||
className={`flex flex-col items-center justify-center`}
|
className={`flex flex-col items-center justify-center`}
|
||||||
style={{ height: `${scrollHeight}px` }}
|
style={{ height: `${scrollHeight}px` }}
|
||||||
|
|
@ -288,8 +287,7 @@ export default function Space() {
|
||||||
<Empty type="nodata" />
|
<Empty type="nodata" />
|
||||||
</div>
|
</div>
|
||||||
)} */}
|
)} */}
|
||||||
</div>
|
</div>
|
||||||
)}
|
|
||||||
</Swiper.Item>
|
</Swiper.Item>
|
||||||
</Swiper>
|
</Swiper>
|
||||||
<div
|
<div
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue