Feat footer

config/alipay/app.json

@@ -91,7 +91,8 @@
     "pages/Countdown/index",
     "pages/SelectContact/index",
     "pages/Table/index",
-    "pages/SafeArea/index"
+    "pages/SafeArea/index",
+    "pages/Footer/index"
   ],
   "window": {
     "enableWK": "YES",

config/wechat.json

@@ -85,7 +85,8 @@
     "pages/AutoResize",
     "pages/Countdown",
     "pages/Typography",
-    "pages/PageContainer"
+    "pages/PageContainer",
+    "pages/Footer"
   ],
   "src": [
     "_locale",
@@ -147,6 +148,7 @@
     "AutoResize",
     "Countdown",
     "Typography",
-    "PageContainer"
+    "PageContainer",
+    "Footer"
   ]
-}
+}

config/wechat/app.json

@@ -82,6 +82,7 @@
     "demo/pages/AutoResize/index",
     "demo/pages/Countdown/index",
     "demo/pages/Typography/index",
-    "demo/pages/PageContainer/index"
+    "demo/pages/PageContainer/index",
+    "demo/pages/Footer/index"
   ]
 }

config/wechat/app.wxss

@@ -3,8 +3,3 @@
 page {
   background-color: var(--color-background);
 }
-
-.navigation-bar {
-  height: 88px;
-  background-color: var(--color-card);
-}

demo/pages/Footer/index.axml

@@ -0,0 +1,94 @@
+<view class="navigation-bar"/>
+
+<view class="page">
+  <ant-container title="基础页脚">
+    <ant-footer label="没有更多了" />
+    <ant-footer label="没有更多了" noLabelDivider/>
+    <!-- #if ALIPAY -->
+    <ant-footer label="placeholder">
+      <view slot="label">
+        <ant-icon type="HandPayCircleOutline" style="margin-right: 4px"/>
+        蚂蚁财富
+      </view>
+    </ant-footer>
+    <!-- #endif -->
+  </ant-container>
+
+  <ant-container title="带内容的页脚">
+    <ant-footer
+      content="@ 2004-2020 Alipay.com All rights reserved"
+    />
+    <!-- #if ALIPAY -->
+    <ant-footer
+      content="placeholder"
+    >
+      <view slot="content">
+        © 蚂蚁科技集团股份有限公司
+      </view>
+    </ant-footer>
+    <!-- #endif -->
+  </ant-container>
+
+  <ant-container title="带链接的页脚">
+    <ant-footer
+      links="{{links1}}"
+      onLinkTap="handleLinkTap"
+    />
+    <ant-footer
+      links="{{links2}}"
+      onLinkTap="handleLinkTap"
+    />
+  </ant-container>
+
+  <ant-container title="带标签的页脚">
+    <ant-footer
+      chips="{{chips}}"
+      onChipTap="handleChipTap"
+    />
+  </ant-container>
+
+  <ant-container title="组合使用">
+
+    <!-- #if ALIPAY -->
+    <ant-footer
+      label="placeholder"
+      content="过往业绩不预示产品未来表现，市场有风险，投资需谨慎"
+      noLabelDivider
+    >
+      <view slot="label">
+        <ant-icon type="HandPayCircleOutline" style="margin-right: 4px"/>
+        蚂蚁财富
+      </view>
+    </ant-footer>
+
+    <view style="height:24px;"/>
+
+    <!-- #endif -->
+
+
+    <ant-footer
+      links="{{links2}}"
+      content="@ 2004-2020 Alipay.com All rights reserved"
+      onLinkTap="handleLinkTap"
+    />
+
+    <view style="height:24px;"/>
+
+    <ant-footer
+      content="没找到需要的？搜一下试试"
+      chips="{{chips}}"
+      onChipTap="handleChipTap"
+    />
+
+    <view style="height:24px;"/>
+
+    <ant-footer
+      label="没有更多了"
+      content="@ 2004-2020 Alipay.com All rights reserved"
+      links="{{links2}}"
+      chips="{{chips}}"
+      onLinkTap="handleLinkTap"
+      onChipTap="handleChipTap"
+    />
+  </ant-container>
+</view>

demo/pages/Footer/index.json5

@@ -0,0 +1,17 @@
+{
+  /// #if WECHAT
+  "navigationBarTitleText": "Footer",
+  /// #endif
+
+  /// #if ALIPAY
+  "defaultTitle": "Footer",
+  "transparentTitle": "auto",
+  "titlePenetrate": "YES",
+  /// #endif
+
+  "usingComponents": {
+    "ant-icon": "../../../src/Icon/index",
+    "ant-footer": "../../../src/Footer/index",
+    "ant-container": "../../../src/Container/index"
+  }
+}

demo/pages/Footer/index.less

@@ -0,0 +1,3 @@
+.page {
+  padding: 24rpx;
+}

demo/pages/Footer/index.ts

@@ -0,0 +1,63 @@
+Page({
+  data: {
+    links1: [
+      {
+        key: 'alipay',
+        text: '支付宝',
+      },
+    ],
+    links2: [
+      {
+        key: 'alicloud',
+        text: '阿里云',
+      },
+      {
+        key: 'alipay',
+        text: '支付宝',
+      },
+    ],
+    chips: [
+      {
+        key: 'jiebei',
+        text: '蚂蚁借呗',
+      },
+      {
+        key: 'beiyongjin',
+        text: '备用金',
+      },
+      {
+        key: 'huabei',
+        text: '花呗收钱',
+        disabled: true,
+      },
+    ],
+  },
+
+  handleLinkTap(item) {
+    if (item.disabled) return;
+    /// #if ALIPAY
+    if (item.disabled) return;
+    my.showToast({ content: item.key });
+    /// #endif
+    /// #if WECHAT
+    if (item.detail.disabled) return;
+    // @ts-ignore
+    wx.showToast({
+      title: item.detail.key,
+    });
+    /// #endif
+  },
+  handleChipTap(item) {
+    /// #if ALIPAY
+    if (item.disabled) return;
+    my.showToast({ content: item.key });
+    /// #endif
+    /// #if WECHAT
+    if (item.detail.disabled) return;
+    // @ts-ignore
+    wx.showToast({
+      title: item.detail.key,
+    });
+    /// #endif
+  },
+});