clxx 2.1.8 → 3.0.1

package/test/src/scrollview/CustomLoadingSection.jsx

@@ -0,0 +1,53 @@
+import { useState } from "react";
+import { ScrollView } from "@";
+
+export default function CustomLoadingSection() {
+  const [list, setList] = useState(() =>
+    Array.from({ length: 5 }, (_, i) => i + 1),
+  );
+  const [loading, setLoading] = useState(false);
+
+  const onReachBottom = () => {
+    if (loading) return;
+    setLoading(true);
+    window.setTimeout(() => {
+      setList((prev) => [
+        ...prev,
+        ...Array.from({ length: 5 }, (_, i) => prev.length + i + 1),
+      ]);
+      setLoading(false);
+    }, 600);
+  };
+
+  return (
+    <div className="section">
+      <div className="section-title">
+        自定义 loading 内容 + 触底阈值 100px
+      </div>
+      <div className="section-body" style={{ height: "4rem" }}>
+        <ScrollView
+          reachBottomThreshold={100}
+          onReachBottom={onReachBottom}
+          loadingContent={
+            <div
+              style={{
+                padding: "0.2rem",
+                textAlign: "center",
+                fontSize: "0.24rem",
+                color: loading ? "#2f7dff" : "#8e8e93",
+              }}
+            >
+              {loading ? "正在加载…" : "上拉加载更多"}
+            </div>
+          }
+        >
+          {list.map((n) => (
+            <div className="item" key={n}>
+              卡片 {n}
+            </div>
+          ))}
+        </ScrollView>
+      </div>
+    </div>
+  );
+}

package/test/src/scrollview/HeightModeSection.jsx

@@ -0,0 +1,42 @@
+import { ScrollView } from "@";
+
+export default function HeightModeSection() {
+  return (
+    <div className="section">
+      <div className="section-title">两种高度方式：prop height vs CSS</div>
+      <div className="section-body">
+        <div style={{ display: "flex", gap: "0.16rem", padding: "0.16rem" }}>
+          <div style={{ flex: 1, border: "1px solid #eee" }}>
+            <div className="stat">prop height="2.4rem"</div>
+            <ScrollView height="2.4rem">
+              {Array.from({ length: 12 }, (_, i) => (
+                <div className="item" key={i}>
+                  A{i + 1}
+                </div>
+              ))}
+            </ScrollView>
+          </div>
+          <div
+            style={{
+              flex: 1,
+              border: "1px solid #eee",
+              display: "flex",
+              flexDirection: "column",
+            }}
+          >
+            <div className="stat">外层 flex 高 2.4rem</div>
+            <div style={{ height: "2.4rem" }}>
+              <ScrollView>
+                {Array.from({ length: 12 }, (_, i) => (
+                  <div className="item" key={i}>
+                    B{i + 1}
+                  </div>
+                ))}
+              </ScrollView>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/test/src/scrollview/ImperativeSection.jsx

@@ -0,0 +1,56 @@
+import { useRef } from "react";
+import { ScrollView } from "@";
+
+export default function ImperativeSection() {
+  const ref = useRef(null);
+  const list = Array.from({ length: 30 }, (_, i) => i + 1);
+
+  return (
+    <div className="section">
+      <div className="section-title">命令式 API（forwardRef + handle）</div>
+      <div className="section-body" style={{ height: "4rem" }}>
+        <ScrollView ref={ref}>
+          {list.map((n) => (
+            <div
+              className={"item" + (n === 18 ? " target" : "")}
+              key={n}
+              data-index={n}
+            >
+              Item #{n}
+              {n === 18 && " ← 目标项"}
+            </div>
+          ))}
+        </ScrollView>
+      </div>
+      <div className="toolbar">
+        <button onClick={() => ref.current?.scrollToTop("smooth")}>
+          ↑ 顶部
+        </button>
+        <button onClick={() => ref.current?.scrollToBottom("smooth")}>
+          ↓ 底部
+        </button>
+        <button onClick={() => ref.current?.scrollTo({ top: 200 })}>
+          跳到 200px
+        </button>
+        <button
+          onClick={() =>
+            ref.current?.scrollToElement('[data-index="18"]', {
+              behavior: "smooth",
+              offset: -20,
+            })
+          }
+        >
+          滚到目标项
+        </button>
+        <button
+          onClick={() => {
+            const el = ref.current?.getElement();
+            console.log("getElement →", el);
+          }}
+        >
+          打印 DOM
+        </button>
+      </div>
+    </div>
+  );
+}

package/test/src/scrollview/NotScrollableSection.jsx

@@ -0,0 +1,32 @@
+import { useState } from "react";
+import { ScrollView } from "@";
+
+export default function NotScrollableSection() {
+  const [items, setItems] = useState([1, 2]);
+  return (
+    <div className="section">
+      <div className="section-title">
+        内容不足时自动隐藏 loading（点击按钮加内容观察 loading 出现）
+      </div>
+      <div className="section-body" style={{ height: "3rem" }}>
+        <ScrollView showLoading>
+          {items.map((n) => (
+            <div className="item" key={n}>
+              Row {n}
+            </div>
+          ))}
+        </ScrollView>
+      </div>
+      <div className="toolbar">
+        <button
+          onClick={() =>
+            setItems((prev) => [...prev, prev.length + 1, prev.length + 2])
+          }
+        >
+          + 加 2 行
+        </button>
+        <button onClick={() => setItems([1, 2])}>重置</button>
+      </div>
+    </div>
+  );
+}

package/test/src/scrollview/PerfSection.jsx

@@ -0,0 +1,34 @@
+import { useEffect, useRef, useState } from "react";
+import { ScrollView } from "@";
+
+export default function PerfSection() {
+  const ref = useRef(null);
+  const [count, setCount] = useState(0);
+  const list = Array.from({ length: 1000 }, (_, i) => i + 1);
+
+  useEffect(() => {
+    console.log("PerfSection mounted, 1000 items");
+  }, []);
+
+  return (
+    <div className="section">
+      <div className="section-title">大列表性能（1000 项 + RAF 节流）</div>
+      <div className="stat">onScroll 触发次数: {count}</div>
+      <div className="section-body" style={{ height: "4rem" }}>
+        <ScrollView ref={ref} onScroll={() => setCount((c) => c + 1)}>
+          {list.map((n) => (
+            <div className="item" key={n}>
+              性能行 {n}
+            </div>
+          ))}
+        </ScrollView>
+      </div>
+      <div className="toolbar">
+        <button onClick={() => ref.current?.scrollToTop("smooth")}>
+          回顶部
+        </button>
+        <button onClick={() => setCount(0)}>重置计数</button>
+      </div>
+    </div>
+  );
+}

package/test/src/scrollview/index.css

@@ -1,10 +1,94 @@
-.ScrollView {
-  height: 400px;
-  background-color: #f4f5f6;
+.scrollview-demo {
+  padding: 0.2rem;
+  font-size: 0.28rem;
+  color: #1d1d1f;
+}
+
+.scrollview-demo .section {
+  margin-bottom: 0.32rem;
+  border-radius: 0.16rem;
+  background: #fff;
+  box-shadow: 0 0.04rem 0.16rem rgba(0, 0, 0, 0.06);
+  overflow: hidden;
+}
+
+.scrollview-demo .section-title {
+  padding: 0.18rem 0.24rem;
+  font-size: 0.26rem;
+  font-weight: 600;
+  color: #3c3c43;
+  background: #f2f2f7;
+  border-bottom: 1px solid rgba(60, 60, 67, 0.18);
+}
+
+.scrollview-demo .section-body {
+  position: relative;
+}
+
+.scrollview-demo .section-body .ScrollView {
+  background: #f9f9fb;
+}
+
+.scrollview-demo .item {
+  padding: 0.24rem 0.3rem;
+  font-size: 0.28rem;
+  color: #1d1d1f;
+  border-bottom: 1px solid rgba(60, 60, 67, 0.12);
+}
+
+.scrollview-demo .item.target {
+  background: rgba(47, 125, 255, 0.12);
+  color: #2f7dff;
+  font-weight: 600;
+}
+
+.scrollview-demo .toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.12rem;
+  padding: 0.16rem 0.24rem;
+  background: #fff;
+  border-top: 1px solid rgba(60, 60, 67, 0.12);
+}
+
+.scrollview-demo .toolbar button {
+  flex: 1 1 auto;
+  min-width: 1.4rem;
+  height: 0.64rem;
+  font-size: 0.24rem;
+  border: 1px solid rgba(60, 60, 67, 0.18);
+  border-radius: 0.32rem;
+  background: #fff;
+  color: #2f7dff;
+  cursor: pointer;
+}
+
+.scrollview-demo .toolbar button:active {
+  opacity: 0.6;
+}
+
+.scrollview-demo .stat {
+  padding: 0.12rem 0.24rem;
+  font-size: 0.22rem;
+  font-family: "SF Mono", "Menlo", monospace;
+  color: #6b7280;
+  background: #f2f2f7;
+  border-bottom: 1px solid rgba(60, 60, 67, 0.12);
+}
+
+.scrollview-demo .badge {
+  display: inline-block;
   padding: 0 0.1rem;
-  border: 1px solid #000;
-  .content {
-    height: 500px;
-    background-image: linear-gradient(to top, #fff, green);
-  }
+  margin-left: 0.08rem;
+  font-size: 0.22rem;
+  border-radius: 0.08rem;
+  background: rgba(47, 125, 255, 0.12);
+  color: #2f7dff;
+}
+
+.scrollview-demo .empty {
+  padding: 0.6rem;
+  text-align: center;
+  color: #8e8e93;
+  font-size: 0.26rem;
 }

package/test/src/scrollview/index.jsx

@@ -1,52 +1,20 @@
 import "./index.css";
-import React, { useRef, useState } from "react";
-import { ScrollView } from "@";
+import BasicSection from "./BasicSection";
+import ImperativeSection from "./ImperativeSection";
+import CustomLoadingSection from "./CustomLoadingSection";
+import NotScrollableSection from "./NotScrollableSection";
+import PerfSection from "./PerfSection";
+import HeightModeSection from "./HeightModeSection";
 
 export default function Index() {
-  const [list, setList] = useState([1]);
-  const isLoading = useRef(false);
-  const [showLoading, setShowLoading] = useState(true);
-
-  const loadMore = async () => {
-    if (!showLoading) return;
-
-    isLoading.current = true;
-    return new Promise((resolve) => {
-      window.setTimeout(() => {
-        const num = list.length + 1;
-        list.push(num);
-        setList([...list]);
-        resolve();
-        isLoading.current = false;
-        if (num > 5) {
-          setShowLoading(false);
-        }
-      }, 800);
-    });
-  };
-
   return (
-    <div className="ScrollView">
-      <ScrollView
-        onReachTop={(e) => {
-          console.log("reachTop", e);
-        }}
-        onReachBottom={(e) => {
-          console.log("reachBottom", e);
-          if (!isLoading.current) {
-            loadMore();
-          }
-        }}
-        showLoading={showLoading}
-      >
-        {list.map((item, index) => {
-          return (
-            <div className="content" key={index}>
-              {item}
-            </div>
-          );
-        })}
-      </ScrollView>
+    <div className="scrollview-demo">
+      <BasicSection />
+      <ImperativeSection />
+      <CustomLoadingSection />
+      <NotScrollableSection />
+      <PerfSection />
+      <HeightModeSection />
     </div>
   );
 }