tiefen_space_h5/app/page.js

"use client";

import React, { useEffect, useRef, useState, Suspense } from "react";
import {
  Tabs,
  Swiper,
  PullToRefresh,
  Toast,
  InfiniteScroll,
  List,
  Image,
} from "antd-mobile";

import PostItem from "../components/PostItem";
import { sleep } from "antd-mobile/es/utils/sleep";
import "./index.css";
import PostItemSkeleton from "@/components/skeletons/PostItemSkeleton";
import Link from "next/link";
const variables = {
  "@active-line-color": "#f00", // 将主题色改为红色
};
const tabItems = [
  { key: "commend", title: "推荐" },
  { key: "follow", title: "关注" },
];
let count = 0;

// const scrollHeight = 700;
// const scrollHeight = window.innerHeight-126
export default function Home() {
  const swiperRef = useRef(null);
  const [activeIndex, setActiveIndex] = useState(0);
  const [data, setData] = useState([]);
  const [hasMore, setHasMore] = useState(true);
  const [scrollHeight, setScrollHeight] = useState(0);

  // 获取屏幕高度
  // const scrollHeight = 600;
  useEffect(() => {
    setScrollHeight(window.innerHeight - 126);
  }, []);
  async function mockRequest() {
    if (count >= 5) {
      return [];
    }
    await sleep(2000);
    count++;
    return [
      "A",
      "B",
      "C",
      "D",
      "E",
      "F",
      "G",
      "H",
      "I",
      "J",
      "K",
      "L",
      "M",
      "N",
      "O",
      "P",
      "Q",
    ];
  }
  async function doRefresh() {
    await sleep(1000);
    Toast.show({
      icon: "fail",
      content: "刷新失败",
    });
    throw new Error("刷新失败");
  }
  async function loadMore() {
    const append = await mockRequest();
    setData((val) => [...val, ...append]);
    setHasMore(append.length > 0);
  }
  return (
    <div className="h-screen">
      <div className="flex justify-between items-center px-2 custom-tabs text-gray-400 sticky top-0 z-10 bg-deepBg">
        <Tabs
          activeKey={tabItems[activeIndex].key}
          onChange={(key) => {
            const index = tabItems.findIndex((item) => item.key === key);
            setActiveIndex(index);
            swiperRef.current?.swipeTo(index);
          }}
        >
          {tabItems.map((item) => (
            <Tabs.Tab
              forceRender={false}
              title={item.title}
              key={item.key}
              className="text-left"
            />
          ))}
        </Tabs>
        <Link href="search" className="w-9 h-9 flex items-center justify-center bg-[#FFFFFF1A] rounded-full"><Image src="/icons/search.png"/></Link>
      </div>
      <Swiper
        className="overflow-visible"
        direction="horizontal"
        loop
        indicator={() => null}
        ref={swiperRef}
        defaultIndex={activeIndex}
        onIndexChange={(index) => {
          setActiveIndex(index);
        }}
      >
        <Swiper.Item>
          <PullToRefresh onRefresh={doRefresh}>
            <List className="px-4 overflow-y-auto scrollbarBox_hidden">
              <PostItemSkeleton />
              <List.Item className="!p-0">
                <PostItem  type="post" photos={[
            {url:"https://picsum.photos/seed/picsum/200/300",type:"video"},
            {url:"https://picsum.photos/seed/picsum/200/300",type:"img"},
            {url:"https://picsum.photos/seed/picsum/200/300",type:"img"},
          ]}/>
              </List.Item>
              <List.Item className="!p-0">
                <PostItem  type="post" photos={[
            {url:"https://picsum.photos/seed/picsum/200/300",type:"img"},
          ]}/>
              </List.Item>
              <List.Item className="!p-0">
                <PostItem  type="post" photos={[
            {url:"https://picsum.photos/seed/picsum/200/300",type:"img"},
            {url:"https://picsum.photos/seed/picsum/200/300",type:"img"},
          ]}/>
              </List.Item>
              <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
            </List>
          </PullToRefresh>
        </Swiper.Item>
        <Swiper.Item>
          <PullToRefresh onRefresh={doRefresh}>
            <List
              className="p-2 overflow-y-auto scrollbarBox_hidden"
              style={{ maxHeight: `${scrollHeight}px` }}
            >
              <List.Item className="!p-0">
                <PostItem follow={true} type="post"/>
              </List.Item>
              <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
            </List>
          </PullToRefresh>
        </Swiper.Item>
      </Swiper>
    </div>
  );
}