From e4c920230c328ff9cd87b6499b4de43a2e835ced Mon Sep 17 00:00:00 2001
From: "weifang.jiagweifan" <weifang.jiagweifan@antgroup.com>
Date: Thu, 19 Sep 2024 14:13:07 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=A0=B7=E5=BC=8F=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 compiled/alipay/demo/pages/Grid/index.axml | 57 +++++++++++++++++++---
 compiled/alipay/demo/pages/Grid/index.less |  6 +++
 compiled/alipay/src/Grid/index.less        |  3 ++
 compiled/wechat/demo/pages/Grid/index.wxml | 57 +++++++++++++++++++---
 compiled/wechat/demo/pages/Grid/index.wxss |  6 +++
 compiled/wechat/src/Grid/index.wxss        |  3 ++
 demo/pages/Grid/index.axml                 | 48 +++++++++++++++---
 demo/pages/Grid/index.less                 |  6 +++
 src/Grid/index.less                        |  3 ++
 9 files changed, 169 insertions(+), 20 deletions(-)

diff --git a/compiled/alipay/demo/pages/Grid/index.axml b/compiled/alipay/demo/pages/Grid/index.axml
index 2a4384775..0f0fe44c9 100644
--- a/compiled/alipay/demo/pages/Grid/index.axml
+++ b/compiled/alipay/demo/pages/Grid/index.axml
@@ -1,14 +1,8 @@
-<ant-container title="2列">
-  <ant-grid
-    items="{{items2}}"
-    onTap="handleTapItem"
-    columns="{{2}}"
-  ></ant-grid>
-</ant-container>
 <ant-container title="3列">
   <ant-grid
     items="{{items3}}"
     onTap="handleTapItem"
+    iconSize="{{36}}"
     columns="{{3}}"
   ></ant-grid>
 </ant-container>
@@ -26,6 +20,13 @@
     columns="{{5}}"
   ></ant-grid>
 </ant-container>
+<ant-container title="换行">
+  <ant-grid
+    items="{{[...items5, ...items5]}}"
+    onTap="handleTapItem"
+    columns="{{5}}"
+  ></ant-grid>
+</ant-container>
 <ant-container title="5列-展示分割线">
   <ant-grid
     items="{{items5}}"
@@ -38,12 +39,14 @@
   <ant-grid
     items="{{items2withDesc}}"
     onTap="handleTapItem"
+    iconSize="{{36}}"
     columns="{{2}}"
   ></ant-grid>
 </ant-container>
 <ant-container title="3列-带描述">
   <ant-grid
     items="{{items3withDesc}}"
+    iconSize="{{36}}"
     onTap="handleTapItem"
     columns="{{3}}"
   ></ant-grid>
@@ -56,6 +59,14 @@
     gridItemLayout="horizontal"
   ></ant-grid>
 </ant-container>
+<ant-container title="2行-元素横向布局">
+  <ant-grid
+    items="{{items4}}"
+    gridItemLayout="horizontal"
+    onTap="handleTapItem"
+    columns="{{2}}"
+  ></ant-grid>
+</ant-container>
 <ant-container title="3列-元素横向布局">
   <ant-grid
     items="{{items3}}"
@@ -64,6 +75,15 @@
     gridItemLayout="horizontal"
   ></ant-grid>
 </ant-container>
+<ant-container title="2列-带描述">
+  <ant-grid
+    items="{{items2withDesc}}"
+    onTap="handleTapItem"
+    iconSize="{{36}}"
+    gridItemLayout="horizontal"
+    columns="{{2}}"
+  ></ant-grid>
+</ant-container>
 <ant-container title="可滑动">
   <ant-grid
     items="{{scrollItems}}"
@@ -71,6 +91,29 @@
     mode="scroll"
   ></ant-grid>
 </ant-container>
+<ant-container title="滑块可滑动">
+  <swiper
+    indicatorDots="{{true}}"
+    autoplay="{{true}}"
+    vertical="{{false}}"
+    interval="{{1000}}"
+    circular="{{false}}"
+    duration="{{1500}}"
+  >
+    <swiper-item
+      a:for="{{[1, 2, 3, 4]}}"
+      a:for-index="index"
+      a:for-item="item"
+      key="{{'swiper-item-' + index}}"
+    >
+      <ant-grid
+        items="{{[...items5, ...items5]}}"
+        onTap="handleTapItem"
+        columns="{{5}}"
+      ></ant-grid>
+    </swiper-item>
+  </swiper>
+</ant-container>
 <ant-container title="自定义图标大小">
   <ant-grid
     items="{{itemsCustom}}"
diff --git a/compiled/alipay/demo/pages/Grid/index.less b/compiled/alipay/demo/pages/Grid/index.less
index e69de29bb..cc2d4019d 100644
--- a/compiled/alipay/demo/pages/Grid/index.less
+++ b/compiled/alipay/demo/pages/Grid/index.less
@@ -0,0 +1,6 @@
+.a-swiper {
+  padding-bottom: 20rpx;
+}
+.a-swiper-indicator  {
+  bottom: -20rpx !important;
+}
\ No newline at end of file
diff --git a/compiled/alipay/src/Grid/index.less b/compiled/alipay/src/Grid/index.less
index 7a52180dc..b5cda6787 100644
--- a/compiled/alipay/src/Grid/index.less
+++ b/compiled/alipay/src/Grid/index.less
@@ -55,6 +55,9 @@
         top: 0;
         bottom: 0;
         margin: auto;
+        display: flex;
+        justify-content: center;
+        align-items: center;
       }
       .@{gridPrefix}-item-title {
         margin-top: 0;
diff --git a/compiled/wechat/demo/pages/Grid/index.wxml b/compiled/wechat/demo/pages/Grid/index.wxml
index 0531ce7ae..7f5a4a6d0 100644
--- a/compiled/wechat/demo/pages/Grid/index.wxml
+++ b/compiled/wechat/demo/pages/Grid/index.wxml
@@ -1,14 +1,8 @@
-<ant-container title="2列">
-  <ant-grid
-    items="{{items2}}"
-    bind:tap="handleTapItem"
-    columns="{{2}}"
-  ></ant-grid>
-</ant-container>
 <ant-container title="3列">
   <ant-grid
     items="{{items3}}"
     bind:tap="handleTapItem"
+    iconSize="{{36}}"
     columns="{{3}}"
   ></ant-grid>
 </ant-container>
@@ -26,6 +20,13 @@
     columns="{{5}}"
   ></ant-grid>
 </ant-container>
+<ant-container title="换行">
+  <ant-grid
+    items="{{[...items5, ...items5]}}"
+    bind:tap="handleTapItem"
+    columns="{{5}}"
+  ></ant-grid>
+</ant-container>
 <ant-container title="5列-展示分割线">
   <ant-grid
     items="{{items5}}"
@@ -38,12 +39,14 @@
   <ant-grid
     items="{{items2withDesc}}"
     bind:tap="handleTapItem"
+    iconSize="{{36}}"
     columns="{{2}}"
   ></ant-grid>
 </ant-container>
 <ant-container title="3列-带描述">
   <ant-grid
     items="{{items3withDesc}}"
+    iconSize="{{36}}"
     bind:tap="handleTapItem"
     columns="{{3}}"
   ></ant-grid>
@@ -56,6 +59,14 @@
     gridItemLayout="horizontal"
   ></ant-grid>
 </ant-container>
+<ant-container title="2行-元素横向布局">
+  <ant-grid
+    items="{{items4}}"
+    gridItemLayout="horizontal"
+    bind:tap="handleTapItem"
+    columns="{{2}}"
+  ></ant-grid>
+</ant-container>
 <ant-container title="3列-元素横向布局">
   <ant-grid
     items="{{items3}}"
@@ -64,6 +75,15 @@
     gridItemLayout="horizontal"
   ></ant-grid>
 </ant-container>
+<ant-container title="2列-带描述">
+  <ant-grid
+    items="{{items2withDesc}}"
+    bind:tap="handleTapItem"
+    iconSize="{{36}}"
+    gridItemLayout="horizontal"
+    columns="{{2}}"
+  ></ant-grid>
+</ant-container>
 <ant-container title="可滑动">
   <ant-grid
     items="{{scrollItems}}"
@@ -71,6 +91,29 @@
     mode="scroll"
   ></ant-grid>
 </ant-container>
+<ant-container title="滑块可滑动">
+  <swiper
+    indicatorDots="{{true}}"
+    autoplay="{{true}}"
+    vertical="{{false}}"
+    interval="{{1000}}"
+    circular="{{false}}"
+    duration="{{1500}}"
+  >
+    <swiper-item
+      wx:for="{{[1, 2, 3, 4]}}"
+      wx:for-index="index"
+      wx:for-item="item"
+      key="{{'swiper-item-' + index}}"
+    >
+      <ant-grid
+        items="{{[...items5, ...items5]}}"
+        bind:tap="handleTapItem"
+        columns="{{5}}"
+      ></ant-grid>
+    </swiper-item>
+  </swiper>
+</ant-container>
 <ant-container title="自定义图标大小">
   <ant-grid
     items="{{itemsCustom}}"
diff --git a/compiled/wechat/demo/pages/Grid/index.wxss b/compiled/wechat/demo/pages/Grid/index.wxss
index e69de29bb..39d48cb9c 100644
--- a/compiled/wechat/demo/pages/Grid/index.wxss
+++ b/compiled/wechat/demo/pages/Grid/index.wxss
@@ -0,0 +1,6 @@
+.a-swiper {
+  padding-bottom: 20rpx;
+}
+.a-swiper-indicator {
+  bottom: -20rpx !important;
+}
diff --git a/compiled/wechat/src/Grid/index.wxss b/compiled/wechat/src/Grid/index.wxss
index 7bf0bef49..2b4b34c9a 100644
--- a/compiled/wechat/src/Grid/index.wxss
+++ b/compiled/wechat/src/Grid/index.wxss
@@ -65,6 +65,9 @@
   top: 0;
   bottom: 0;
   margin: auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 .ant-grid-item-horizontal .ant-grid-item-title {
   margin-top: 0;
diff --git a/demo/pages/Grid/index.axml b/demo/pages/Grid/index.axml
index 68b72c9d3..b93a090c4 100644
--- a/demo/pages/Grid/index.axml
+++ b/demo/pages/Grid/index.axml
@@ -1,13 +1,8 @@
-<ant-container title="2列">
-  <ant-grid
-    items="{{ items2 }}"
-    onTap="handleTapItem"
-    columns="{{ 2 }}" />
-</ant-container>
 <ant-container title="3列">
   <ant-grid
     items="{{ items3 }}"
     onTap="handleTapItem"
+    iconSize="{{ 36 }}"
     columns="{{ 3 }}" />
 </ant-container>
 <ant-container title="4列">
@@ -22,6 +17,12 @@
     onTap="handleTapItem"
     columns="{{ 5 }}" />
 </ant-container>
+<ant-container title="换行">
+  <ant-grid
+    items="{{ [...items5, ...items5] }}"
+    onTap="handleTapItem"
+    columns="{{ 5 }}" />
+</ant-container>
 <ant-container title="5列-展示分割线">
   <ant-grid
     items="{{ items5 }}"
@@ -33,11 +34,13 @@
   <ant-grid
     items="{{ items2withDesc }}"
     onTap="handleTapItem"
+    iconSize="{{ 36 }}"
     columns="{{ 2 }}" />
 </ant-container>
 <ant-container title="3列-带描述">
   <ant-grid
     items="{{ items3withDesc }}"
+    iconSize="{{ 36 }}"
     onTap="handleTapItem"
     columns="{{ 3 }}" />
 </ant-container>
@@ -48,6 +51,13 @@
     columns="{{ 2 }}"
     gridItemLayout="horizontal" />
 </ant-container>
+<ant-container title="2行-元素横向布局">
+  <ant-grid
+    items="{{ items4 }}"
+    gridItemLayout="horizontal"
+    onTap="handleTapItem"
+    columns="{{ 2 }}" />
+</ant-container>
 <ant-container title="3列-元素横向布局">
   <ant-grid
     items="{{ items3 }}"
@@ -55,12 +65,38 @@
     columns="{{ 3 }}"
     gridItemLayout="horizontal" />
 </ant-container>
+<ant-container title="2列-带描述">
+  <ant-grid
+    items="{{ items2withDesc }}"
+    onTap="handleTapItem"
+    iconSize="{{ 36 }}"
+    gridItemLayout="horizontal"
+    columns="{{ 2 }}" />
+</ant-container>
 <ant-container title="可滑动">
   <ant-grid
     items="{{ scrollItems }}"
     onTap="handleTapItem"
     mode="scroll" />
 </ant-container>
+<ant-container title="滑块可滑动">
+  <swiper
+    indicator-dots="{{ true }}"
+    autoplay="{{ true }}"
+    vertical="{{ false }}"
+    interval="{{ 1000 }}"
+    circular="{{ false }}"
+    duration="{{ 1500 }}"
+>
+  <swiper-item key="swiper-item-{{index}}" a:for="{{[1,2,3,4]}}">
+    <ant-grid
+      items="{{ [...items5, ...items5] }}"
+      onTap="handleTapItem"
+      columns="{{ 5 }}"
+     />
+    </swiper-item>
+</swiper>
+</ant-container>
 <ant-container title="自定义图标大小">
   <ant-grid
     items="{{ itemsCustom }}"
diff --git a/demo/pages/Grid/index.less b/demo/pages/Grid/index.less
index e69de29bb..cc2d4019d 100644
--- a/demo/pages/Grid/index.less
+++ b/demo/pages/Grid/index.less
@@ -0,0 +1,6 @@
+.a-swiper {
+  padding-bottom: 20rpx;
+}
+.a-swiper-indicator  {
+  bottom: -20rpx !important;
+}
\ No newline at end of file
diff --git a/src/Grid/index.less b/src/Grid/index.less
index 7a52180dc..b5cda6787 100644
--- a/src/Grid/index.less
+++ b/src/Grid/index.less
@@ -55,6 +55,9 @@
         top: 0;
         bottom: 0;
         margin: auto;
+        display: flex;
+        justify-content: center;
+        align-items: center;
       }
       .@{gridPrefix}-item-title {
         margin-top: 0;