plain-design 1.0.0-beta.31 → 1.0.0-beta.32

package/src/pages/index/components/normal/DemoStackCard.tsx

@@ -0,0 +1,356 @@
+import {designPage, reactive} from "plain-design-composition";
+import {DemoRow} from "../../Demo/DemoRow";
+import {Select, SelectOption, StackCard, StackCardItem} from "../../../../packages";
+import {getDeviceInfo} from "../../../../packages/utils/getDeviceInfo";
+
+
+export const demoRight3 = designPage(() => {
+  const images = [
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card15.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card14.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card13.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card12.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card11.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card10.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card9.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card8.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card7.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card6.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card5.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card4.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card3.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card2.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card1.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+  ];
+
+  return () => (
+    <DemoRow title="只有右侧2个">
+      <p>StackCard会根据内容自动撑开高度，但是为了保险起见，建议每个元素的宽高一致</p>
+      <div style={{ width: '300px' }}>
+        <StackCard leftBufferCount={0} rightBufferCount={3}>
+          {images.map(url => (
+            <StackCardItem key={url}>
+              <img src={url} style={{ display: 'block' }}/>
+            </StackCardItem>
+          ))}
+        </StackCard>
+      </div>
+    </DemoRow>
+  );
+});
+
+export const demoVerticalOffset = designPage(() => {
+  const images = [
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card15.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card14.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card13.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card12.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card11.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card10.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card9.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card8.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card7.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card6.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card5.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card4.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card3.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card2.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card1.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+  ];
+
+  return () => (
+    <DemoRow title="纵向一并偏移">
+      <div style={{ width: '300px' }}>
+        <StackCard leftBufferCount={0} rightBufferCount={4} stackItemHeight={4} stackItemWidth={12} verticalOffset verticalAlign="bottom">
+          {images.map(url => (
+            <StackCardItem key={url}>
+              <img src={url} style={{ display: 'block' }}/>
+            </StackCardItem>
+          ))}
+        </StackCard>
+      </div>
+    </DemoRow>
+  );
+});
+
+export const demoLeftRight3 = designPage(() => {
+
+  const state = reactive({
+    currentIndex: undefined as any
+  });
+
+  const isMobile = getDeviceInfo().deviceType === 'mobile';
+
+  const images = [
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card15.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card14.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card13.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card12.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card11.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card10.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card9.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card8.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card7.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card6.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card5.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card4.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card3.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card2.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card1.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+  ];
+
+  return () => (
+    <DemoRow title="左右各3个">
+      <div style={{ marginBottom: '16px' }}>
+        <Select v-model={state.currentIndex} width={200}>
+          {images.map((_, index) => (<SelectOption label={`index_${index}`} val={index} key={index}/>))}
+        </Select>
+      </div>
+      <div style={{ width: '300px' }}>
+        <StackCard v-model={state.currentIndex} leftBufferCount={3} rightBufferCount={4}>
+          {images.map(url => (
+            <StackCardItem key={url}>
+              <img src={url} style={{ display: 'block', maxWidth: isMobile ? '33.33vw' : undefined }}/>
+            </StackCardItem>
+          ))}
+        </StackCard>
+      </div>
+    </DemoRow>
+  );
+});
+
+export const demoAll = designPage(() => {
+
+  const isMobile = getDeviceInfo().deviceType === 'mobile';
+
+  const images = [
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card15.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card14.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card13.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card12.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card11.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card10.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card9.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card8.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card7.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card6.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card5.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card4.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card3.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card2.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card1.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+  ];
+
+  return () => (
+    <DemoRow title="全部展示">
+      <div style={{ width: '600px' }}>
+        <StackCard>
+          {images.map(url => (
+            <StackCardItem key={url}>
+              <img src={url} style={{ display: 'block', maxWidth: isMobile ? '33.33vw' : undefined }}/>
+            </StackCardItem>
+          ))}
+        </StackCard>
+      </div>
+    </DemoRow>
+  );
+});
+
+export const demoAlignBottom = designPage(() => {
+
+  const isMobile = getDeviceInfo().deviceType === 'mobile';
+
+  const images = [
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card15.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card14.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card13.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card12.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card11.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card10.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card9.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card8.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card7.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card6.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card5.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card4.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card3.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card2.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card1.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+  ];
+
+  return () => (
+    <DemoRow title="底部对齐">
+      <div style={{ width: '600px' }}>
+        <StackCard verticalAlign="bottom">
+          {images.map(url => (
+            <StackCardItem key={url}>
+              <img src={url}/>
+            </StackCardItem>
+          ))}
+        </StackCard>
+      </div>
+    </DemoRow>
+  );
+});
+
+export const demoRightAll = designPage(() => {
+
+  const isMobile = getDeviceInfo().deviceType === 'mobile';
+
+  const images = [
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card15.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card14.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card13.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card12.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card11.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card10.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card9.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card8.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card7.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card6.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card5.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card4.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card3.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card2.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card1.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+  ];
+
+  return () => (
+    <DemoRow title="全部展示在右边">
+      <div style={{ width: '600px' }}>
+        <StackCard leftBufferCount={0} rightBufferCount={images.length}>
+          {images.map(url => (
+            <StackCardItem key={url}>
+              <img src={url} style={{ display: 'block', maxWidth: isMobile ? '33.33vw' : undefined }}/>
+            </StackCardItem>
+          ))}
+        </StackCard>
+      </div>
+    </DemoRow>
+  );
+});
+
+
+export const demoOffsetRate = designPage(() => {
+
+  const isMobile = getDeviceInfo().deviceType === 'mobile';
+
+  const images = [
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card15.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card14.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card13.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card12.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card11.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card10.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card9.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card8.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card7.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card6.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card5.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card4.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card3.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card2.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card1.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+  ];
+
+  return () => (
+    <DemoRow title="设置偏移距离stackItemWidth">
+      <p>stackItemWidth默认为24，就是每一张卡片偏移24个px；这里设置为80</p>
+      <div style={{ width: '600px' }}>
+        <StackCard leftBufferCount={3} rightBufferCount={4} stackItemWidth={80}>
+          {images.map(url => (
+            <StackCardItem key={url}>
+              <img src={url} style={{ display: 'block', maxWidth: isMobile ? '33.33vw' : undefined }}/>
+            </StackCardItem>
+          ))}
+        </StackCard>
+      </div>
+    </DemoRow>
+  );
+});
+
+
+export const demoScaleRate = designPage(() => {
+
+  const isMobile = getDeviceInfo().deviceType === 'mobile';
+
+  const images = [
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card15.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card14.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card13.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card12.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card11.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card10.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card9.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card8.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card7.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card6.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card5.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card4.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card3.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card2.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card1.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+  ];
+
+  return () => (
+    <DemoRow title="设置缩放比例scaleRate">
+      <p>scaleRate默认为0.1，就是每一张图片缩小10%，这里调整为0.25，也就是4张图之后的图片就小的看不见了</p>
+      <div style={{ width: '600px' }}>
+        <StackCard leftBufferCount={3} rightBufferCount={4} stackItemWidth={80} scaleRate={0.25}>
+          {images.map(url => (
+            <StackCardItem key={url}>
+              <img src={url} style={{ display: 'block', maxWidth: isMobile ? '33.33vw' : undefined }}/>
+            </StackCardItem>
+          ))}
+        </StackCard>
+      </div>
+    </DemoRow>
+  );
+});
+
+export const demoBinding = designPage(() => {
+  const images = [
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card15.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card14.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card13.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card12.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card11.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card10.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card9.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card8.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card7.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card6.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card5.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card4.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card3.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card2.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+    "https://plain-assets.oss-cn-guangzhou.aliyuncs.com/card1.jpg?x-oss-process=image/resize,h_300,w_228,m_fill",
+  ];
+
+  const state = reactive({
+    current: 0
+  });
+
+  return () => (
+    <DemoRow title="双向绑定">
+      <div style={{ width: '300px', float: 'left' }}>
+        <StackCard leftBufferCount={0} rightBufferCount={3} v-model={state.current}>
+          {images.map(url => (
+            <StackCardItem key={url}>
+              <img src={url} style={{ display: 'block' }}/>
+            </StackCardItem>
+          ))}
+        </StackCard>
+      </div>
+      <div style={{ width: '300px', float: 'left' }}>
+        <StackCard leftBufferCount={0} rightBufferCount={3} v-model={state.current}>
+          {images.map(url => (
+            <StackCardItem key={url}>
+              <img src={url} style={{ display: 'block' }}/>
+            </StackCardItem>
+          ))}
+        </StackCard>
+      </div>
+    </DemoRow>
+  );
+});

package/src/pages/index/components/normal/DemoVirtualList.tsx

@@ -1,7 +1,7 @@
-import {computed, designPage, getComponentCls, classnames, reactive} from "plain-design-composition";
+import {classnames, computed, designPage, getComponentCls, reactive} from "plain-design-composition";
 import data2 from '../../../data/data-2.json';
 import {DemoRow} from "../../Demo/DemoRow";
-import {Alert, ApplicationConfigurationProvider, Checkbox, VirtualList} from "../../../../packages";
+import {Alert, Checkbox, VirtualList} from "../../../../packages";
 
 export const demo1 = designPage(() => {
 
@@ -26,10 +26,11 @@ export const demo1 = designPage(() => {
       <div style={{ width: '300px', height: '400px', backgroundColor: '#f6f6f6' }}>
         <VirtualList
           data={list.value} size={40} v-slots={{
-          default: ({ item, index }) => (
+          default: ({ item, index, vIndex }) => (
             <div
               key={index}
               onClick={() => console.log(index, { ...item })}
+              data-idx={index}
               style={{
                 ...item.color,
                 height: '40px',
@@ -104,6 +105,7 @@ export const demo2 = designPage(() => {
             <div
               key={vIndex}
               data-vid={vid}
+              data-idx={index}
               onClick={() => console.log(vid, { ...item })}
               style={{
                 ...item.color,
@@ -187,6 +189,7 @@ export const demo3 = designPage(() => {
           default: ({ item, index }) => (
             <div
               key={index}
+              data-idx={index}
               onClick={() => console.log(index, { ...item })}
               style={{
                 ...item.color,
@@ -269,6 +272,7 @@ export const demo4 = designPage(() => {
           default: ({ item, index }) => (
             <div
               key={index}
+              data-idx={index}
               onClick={() => console.log(index, { ...item })}
               style={{
                 ...item.color,
@@ -324,6 +328,7 @@ export const demo4 = designPage(() => {
           default: ({ item, index }) => (
             <div
               key={index}
+              data-idx={index}
               onClick={() => console.log(index, { ...item })}
               style={{
                 ...item.color,
@@ -376,3 +381,84 @@ export const demo4 = designPage(() => {
     </DemoRow>
   );
 });
+
+
+export const demo2Horizontal = designPage(() => {
+
+  const sourceColors = ['secondary', 'primary', 'success', 'warn', 'error'];
+  let colors: string[] = [];
+  const getRandomColor = () => {
+    if (colors.length === 0) {colors = [...sourceColors];}
+    const palette = colors.splice(Math.floor(Math.random() * colors.length), 1);
+    const backgroundColor = `var(--${getComponentCls(`${palette}-1`)})`;
+    const color = `var(--${getComponentCls(`${palette}-6`)})`;
+    return { backgroundColor, color };
+  };
+  const list = computed(() => data2.slice(0, 188).map(item => ({ ...item, color: getRandomColor() })));
+
+  return () => (
+    <DemoRow title={'横向虚拟滚动'}>
+      <div style={{ width: '400px', height: '100px', backgroundColor: '#f6f6f6' }}>
+        <VirtualList
+          data={list.value}
+          size={60 * 3}
+          dynamicSize
+          horizontal
+          v-slots={{
+            default: ({ item, vid, index, vIndex }) => (
+              <div
+                key={vIndex}
+                data-vid={vid}
+                data-idx={index}
+                onClick={() => console.log(vid, { ...item })}
+                style={{
+                  ...item.color,
+                  width: item.size * 3 + 'px',
+                  display: 'inline-block',
+                  height: '100px'
+                }}
+              >
+                <div
+                  style={{
+                    width: '40px',
+                    backgroundColor: 'var(--custom-secondary-2)',
+                    height: '100%',
+                    overflow: 'hidden',
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                  }}>
+                  {index + 1}
+                </div>
+                <div style={{
+                  width: 'calc(100% - 40px)',
+                  float: 'right',
+                  height: '100%',
+                  padding: '0 12px',
+                  display: 'flex',
+                  justifyContent: 'center',
+                  flexDirection: 'column',
+                  boxSizing: 'border-box',
+                }}>
+                  <div style={{
+                    fontSize: '12px',
+                    display: 'flex',
+                    justifyContent: 'space-between'
+                  }}>
+                    <span>{item.name}</span>
+                    <span>{item.date}</span>
+                  </div>
+                  <div style={{
+                    textAlign: 'right',
+                    color: 'white'
+                  }}>
+                    {item.star}
+                  </div>
+                </div>
+              </div>
+            )
+          }}/>
+      </div>
+    </DemoRow>
+  );
+});