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";
import requre from "@/utils/require";
import baseRequest from "@/utils/baseRequest";
import { generateSignature } from "@/utils/crypto";
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 [loading, setLoading] = useState(true);
  const [hasMore, setHasMore] = useState(true);
  const [scrollHeight, setScrollHeight] = useState(0);
  const [commenPostList,setCommenPostList] = useState([])
  // 获取屏幕高度
  // const scrollHeight = 600;
  useEffect(() => {
    setScrollHeight(window.innerHeight - 126);
    getPostList(2);
    // getData(0)
  }, []);
  async function doRefresh() {
    // await sleep(1000);
    // Toast.show({
    //   icon: "fail",
    //   content: "刷新失败",
    // });
    // throw new Error("刷新失败");
    getPostList(1);
  }
  async function loadMore() {
    // const append = await getPostList(0);
    // setData((val) => [...val, ...append]);
    // setHasMore(append.length > 0);
  }
  const getPostList = async (type = 0) => {
    const data = await requre("POST", "/api/moment/recomm_list", {
      body: { op_type: type },
    });
    setLoading(false)
    if (data.ret == -1) {
      Toast.show({
        icon: "fail",
        content: "加载失败",
      });
    }else{
      setCommenPostList(data.data.recomm_list)
    }
    console.log("res", data);
  };
  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">
              {loading && <div><PostItemSkeleton /><PostItemSkeleton /><PostItemSkeleton /></div>}
              {commenPostList.map(item=><List.Item key={item.id} className="!p-0">
                <PostItem
                  type="post"
                  data={item}
                />
              </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>
  );
}