提交

src/app.config.ts

@@ -1,9 +1,10 @@
 export default defineAppConfig({
   pages: [
+    "pages/index/index",
+    "pages/demo/index",
     "pages/message/list/index",
     "pages/message/index",
     "pages/self/index",
-    "pages/index/index",
     "pages/report/index",
     "pages/detail/index",
     "pages/login/index",

src/http/request.ts

@@ -1,4 +1,5 @@
 import Taro from "@tarojs/taro";
+import { navigateTo } from "@tarojs/taro";
 
 //添加拦截器
 let isRefreshing = true;
@@ -93,6 +94,9 @@ const request = async (params, callback?: any) => {
         });
         return;
       }
+      if (res.data.code === 401) {
+        navigateTo({ url: "/pages/login/index" });
+      }
       resolve(res.data);
     }
   });

src/pages/demo/index.tsx

@@ -0,0 +1,70 @@
+import { Button, Sticky } from "@nutui/nutui-react-taro";
+import { ScrollView, View } from "@tarojs/components";
+import { useEffect, useRef, useState } from "react";
+import { getSystemInfoSync } from "@tarojs/taro";
+
+export default function Demo() {
+  const [scrollHeight, setScrollHeight] = useState<number>(0);
+  const containerTopRef = useRef(null);
+  useEffect(() => {
+    const systemInfo = getSystemInfoSync();
+    // 屏幕高度 - 状态栏 - 导航栏 - 用户信息区域 - 标签栏
+    const height = systemInfo.windowHeight - 44 - 50 - 100;
+    setScrollHeight(height);
+  }, []);
+  return (
+    <View className="bg-[#f8f8f8] h-full w-full">
+      <View>111222</View>
+      <View>111222</View>
+      <View>111222</View>
+      <View>111222</View>
+      <View>111222</View>
+      <ScrollView
+        ref={containerTopRef}
+        style={{ height: `${scrollHeight + 1000}px` }}
+        scrollY
+        className="overflow-hidden"
+      >
+        <Sticky container={containerTopRef} threshold={75}>
+          <Button type="primary">距离顶部75px</Button>
+        </Sticky>
+        <View>122</View>
+        <View>122</View>
+        <View>122</View>
+        <View>122</View>
+        <View>122</View>
+        <View>122</View>
+        <View>122</View>
+        <View>122</View>
+        <View>122</View>
+        <View>122</View>
+        <View>122</View>
+        <View>122</View>
+        <View>122</View>
+        <View>122</View>
+        <View>122</View>
+        <View>122</View>
+        <View>122</View>
+        <View>122</View>
+        <View>122</View>
+        <View>122</View>
+        <View>122</View>
+        <View>122</View>
+        <View>122</View>
+        <View>122</View>
+        <View>122</View>
+        <View>122</View>
+        <View>122</View>
+        <View>122</View>
+        <View>122</View>
+        <View>122</View>
+        <View>122</View>
+        <View>122</View>
+        <View>122</View>
+        <View>122</View>
+        <View>122</View>
+        <View>122ß</View>
+      </ScrollView>
+    </View>
+  );
+}

src/pages/detail/index.tsx

@@ -1,4 +1,4 @@
-import { View } from "@tarojs/components";
+import { ScrollView, View } from "@tarojs/components";
 import { pxTransform, useLoad, navigateBack } from "@tarojs/taro";
 import { useState } from "react";
 import { ArrowLeft, Plus } from "@nutui/icons-react-taro";
@@ -75,6 +75,7 @@ const Detail = () => {
   return postData ? (
     <View>
       <NavBar
+        fixed
         back={
           <>
             <ArrowLeft />
@@ -88,92 +89,94 @@ const Detail = () => {
       >
         帖子详情
       </NavBar>
-      <View className="p-[10px] flex items-center justify-between">
-        <View className="flex items-center">
-          <View
-            className="w-[40px] h-[40px] rounded-[50%] bg-[#000] overflow-hidden  bg-cover bg-center"
-            style={{
-              backgroundImage: postData.user.avatar_url
-                ? `url('${postData.user.avatar_url}')`
-                : "none",
-            }}
-          ></View>
-          <View className="ml-[10rpx]">
-            <View className="text-[14px] font-[800] text-[#9c9dee]">
-              {postData.user.nickname || "微信用户"}
-            </View>
-            {postData.user.is_official ? (
-              <View className="text-[12px] text-[#949494]">
-                《心动女友》官方账号
+      <ScrollView className="pt-[50px]">
+        <View className="p-[10px] flex items-center justify-between">
+          <View className="flex items-center">
+            <View
+              className="w-[40px] h-[40px] rounded-[50%] bg-[#000] overflow-hidden  bg-cover bg-center"
+              style={{
+                backgroundImage: postData.user.avatar_url
+                  ? `url('${postData.user.avatar_url}')`
+                  : "none",
+              }}
+            ></View>
+            <View className="ml-[10rpx]">
+              <View className="text-[14px] font-[800] text-[#9c9dee]">
+                {postData.user.nickname || "微信用户"}
               </View>
-            ) : (
-              <></>
-            )}
+              {postData.user.is_official ? (
+                <View className="text-[12px] text-[#949494]">
+                  《心动女友》官方账号
+                </View>
+              ) : (
+                <></>
+              )}
+            </View>
           </View>
-        </View>
-        <View className="flex items-center">
-          <View
-            className="flex items-center justify-center mr-[12px] text-[12px] bg-[#f8f8f8] text-[#949494] rounded-[20px] h-[25px] w-[60px] text-center"
-            onClick={() =>
-              handleFollowClick(postData.user_id, postData.is_followed)
-            }
-          >
-            {postData.is_followed ? <></> : <Plus color="#1874d0" />}
-            <Text>{postData.is_followed ? "已关注" : "关注"}</Text>
+          <View className="flex items-center">
+            <View
+              className="flex items-center justify-center mr-[12px] text-[12px] bg-[#f8f8f8] text-[#949494] rounded-[20px] h-[25px] w-[60px] text-center"
+              onClick={() =>
+                handleFollowClick(postData.user_id, postData.is_followed)
+              }
+            >
+              {postData.is_followed ? <></> : <Plus color="#1874d0" />}
+              <Text>{postData.is_followed ? "已关注" : "关注"}</Text>
+            </View>
           </View>
         </View>
-      </View>
-      <Swiper
-        height={pxTransform(300)}
-        defaultValue={0}
-        onChange={(e) => {
-          setCurrentIndex(e.detail.current);
-        }}
-        indicator={
-          <View
-            style={{
-              display: "flex",
-              flexDirection: "row",
-              justifyContent: "center",
-              alignItems: "center",
-              position: "absolute",
-              left: "85%",
-              bottom: pxTransform(10),
-              width: pxTransform(46),
-              height: pxTransform(22),
-              backgroundColor: "rgba(0, 0, 0, 0.33)",
-              borderRadius: pxTransform(22),
-              textAlign: "center",
-              fontSize: pxTransform(14),
-              zIndex: 1,
-            }}
-          >
-            <Text style={{ color: "#fff" }}>
-              {currentIndex + 1}/{postData.media_url.length}
-            </Text>
-          </View>
-        }
-      >
-        {postData.media_url.map((item, index) => (
-          <Swiper.Item key={item}>
-            <Image
-              width="100%"
-              height="100%"
-              onClick={() => {
-                setShowPreview(true);
-                setInit(index + 1);
+        <Swiper
+          height={pxTransform(300)}
+          defaultValue={0}
+          onChange={(e) => {
+            setCurrentIndex(e.detail.current);
+          }}
+          indicator={
+            <View
+              style={{
+                display: "flex",
+                flexDirection: "row",
+                justifyContent: "center",
+                alignItems: "center",
+                position: "absolute",
+                left: "85%",
+                bottom: pxTransform(10),
+                width: pxTransform(46),
+                height: pxTransform(22),
+                backgroundColor: "rgba(0, 0, 0, 0.33)",
+                borderRadius: pxTransform(22),
+                textAlign: "center",
+                fontSize: pxTransform(14),
+                zIndex: 1,
               }}
-              mode="aspectFill"
-              src={item.src}
-            />
-          </Swiper.Item>
-        ))}
-      </Swiper>
-      <View className="p-[10px]">
-        <View className="text-[14px] text-[#333]">{postData.content}</View>
-        <CommentList postId={postData.id} />
-        <CommentListInteraction postData={postData} />
-      </View>
+            >
+              <Text style={{ color: "#fff" }}>
+                {currentIndex + 1}/{postData.media_url.length}
+              </Text>
+            </View>
+          }
+        >
+          {postData.media_url.map((item, index) => (
+            <Swiper.Item key={item}>
+              <Image
+                width="100%"
+                height="100%"
+                onClick={() => {
+                  setShowPreview(true);
+                  setInit(index + 1);
+                }}
+                mode="aspectFill"
+                src={item.src}
+              />
+            </Swiper.Item>
+          ))}
+        </Swiper>
+        <View className="p-[10px]">
+          <View className="text-[14px] text-[#333]">{postData.content}</View>
+          <CommentList postId={postData.id} />
+        </View>
+      </ScrollView>
+      <CommentListInteraction postData={postData} />
       <ImagePreview
         images={postData.media_url}
         visible={showPreview}