js: add slidePosition

2023-04-04 19:49:10 +08:00
parent f1177e27b4
commit 930593fe0c
11 changed files with 98 additions and 14 deletions
--- a/doric-demo/src/SliderInListDemo.tsx
+++ b/doric-demo/src/SliderInListDemo.tsx
@@ -0,0 +1,67 @@
+import {
+  Group,
+  List,
+  Panel,
+  layoutConfig,
+  jsx,
+  ListItem,
+  Slider,
+  SlideItem,
+  Image,
+  Color,
+} from "doric";
+const imageUrls = [
+  "http://b.hiphotos.baidu.com/image/pic/item/908fa0ec08fa513db777cf78376d55fbb3fbd9b3.jpg",
+  "http://f.hiphotos.baidu.com/image/pic/item/0e2442a7d933c8956c0e8eeadb1373f08202002a.jpg",
+  "http://f.hiphotos.baidu.com/image/pic/item/b151f8198618367aa7f3cc7424738bd4b31ce525.jpg",
+  "http://b.hiphotos.baidu.com/image/pic/item/0eb30f2442a7d9337119f7dba74bd11372f001e0.jpg",
+  "http://a.hiphotos.baidu.com/image/h%3D300/sign=b38f3fc35b0fd9f9bf175369152cd42b/9a504fc2d5628535bdaac29e9aef76c6a6ef63c2.jpg",
+  "http://h.hiphotos.baidu.com/image/pic/item/810a19d8bc3eb1354c94a704ac1ea8d3fd1f4439.jpg",
+  "http://hbimg.b0.upaiyun.com/ca29ea125b7f2d580f573e48eb594b1ef509757f34a08-m0hK45_fw658",
+  "http://b.hiphotos.baidu.com/image/pic/item/908fa0ec08fa513db777cf78376d55fbb3fbd9b3.jpg",
+  "http://f.hiphotos.baidu.com/image/pic/item/0e2442a7d933c8956c0e8eeadb1373f08202002a.jpg",
+  "http://f.hiphotos.baidu.com/image/pic/item/b151f8198618367aa7f3cc7424738bd4b31ce525.jpg",
+  "http://b.hiphotos.baidu.com/image/pic/item/0eb30f2442a7d9337119f7dba74bd11372f001e0.jpg",
+  "http://a.hiphotos.baidu.com/image/h%3D300/sign=b38f3fc35b0fd9f9bf175369152cd42b/9a504fc2d5628535bdaac29e9aef76c6a6ef63c2.jpg",
+  "http://h.hiphotos.baidu.com/image/pic/item/810a19d8bc3eb1354c94a704ac1ea8d3fd1f4439.jpg",
+];
+
+@Entry
+export class SliderInListDemo extends Panel {
+  build(root: Group) {
+    <List
+      parent={root}
+      layoutConfig={layoutConfig().most()}
+      itemCount={50}
+      renderItem={() =>
+        (
+          <ListItem layoutConfig={layoutConfig().mostWidth().fitHeight()}>
+            <Slider
+              layoutConfig={layoutConfig().mostWidth().justHeight()}
+              height={50}
+              backgroundColor={Color.RED}
+              itemCount={imageUrls.length}
+              onPageSlided={function (idx) {
+                const sliderView = this as unknown as Slider;
+                sliderView.slidePosition = idx;
+              }}
+              renderPage={(idx) =>
+                (
+                  <SlideItem
+                    layoutConfig={layoutConfig().mostWidth().fitHeight()}
+                  >
+                    <Image
+                      layoutConfig={layoutConfig().mostWidth().justHeight()}
+                      height={100}
+                      imageUrl={imageUrls[idx]}
+                    />
+                  </SlideItem>
+                ) as SlideItem
+              }
+            />
+          </ListItem>
+        ) as ListItem
+      }
+    />;
+  }
+}