支付宝小程序扩展组件 页脚·Footer

显示页面页脚组件。

扫码体验

示例代码

{
  "defaultTitle": "Footer",
  "usingComponents": {
    "footer": "mini-ali-ui/es/footer/index"
  }
}

<footer 
  type="{{footerInfo1.type}}" 
  content="{{footerInfo1.content}}"
/>
<footer 
  type="{{footerInfo2.type}}" 
  content="{{footerInfo2.content}}"
  extend="{{footerInfo2.extend}}"
/>
<footer 
  type="{{footerInfo3.type}}" 
  content="{{footerInfo3.content}}"
/>
<footer 
  type="{{footerInfo4.type}}" 
  content="{{footerInfo4.content}}"
  extend="{{footerInfo4.extend}}"
  onBrandTap="brandClick"
/>
<footer 
  type="{{footerInfo5.type}}" 
  content="{{footerInfo5.content}}"
  extend="{{footerInfo5.extend}}"
  onBrandTap="brandClick"
/>
<footer 
  type="{{footerInfo6.type}}" 
  content="{{footerInfo6.content}}"
  extend="{{footerInfo6.extend}}"
/>
<footer 
  type="{{footerInfo7.type}}" 
  content="{{footerInfo7.content}}"
  footerEndColor="{{footerInfo7.footerEndColor}}"
/>
<footer 
  type="{{footerInfo8.type}}"
/>
<footer 
  type="{{footerInfo8.type}}" 
  content="{{footerInfo8.content}}"
  showEndIcon="{{footerInfo8.showEndIcon}}"
  iconSize="{{footerInfo8.iconSize}}"
/>

page {
  padding-top: 20px;
  background-color: #fff;
}
.am-footer {
  margin-bottom: 40px;
}

Page({
  data: {
    footerInfo1: {
      type: 'normal',
      content: '底部文案置底说明',
    },
    footerInfo2: {
      type: 'guide',
      content: '没找到需要的？搜一下试试',
      extend: [
        {
          link: '/pages/list/app',
          text: '蚂蚁借呗',
        },
        {
          link: '/pages/list/app',
          text: '备用金',
        },
        {
          link: '/pages/list/app',
          text: '花呗收钱',
        },
      ],
    },
    footerInfo3: {
      type: 'copyright',
      content: '© 2004-2020 Alipay.com. All rights reserved.',
    },
    footerInfo4: {
      type: 'brand',
      content: '过往业绩不预示产品未来表现，市场有风险，投资需谨慎',
      extend: [
        {
          logo: 'https://gw.alipayobjects.com/mdn/rms_ce4c6f/afts/img/A*XMCgSYx3f50AAAAAAAAAAABkARQnAQ',
          width: '30px',
          height: '30px',
          link: '/pages/list/app',
        },
        {
          logo: 'https://gw.alipayobjects.com/mdn/rms_ce4c6f/afts/img/A*gWo-TLFGp38AAAAAAAAAAABkARQnAQ',
          width: '420rpx',
          height: '116rpx',
        },
      ],
    },
    footerInfo5: {
      type: 'link',
      content: '© 2004-2020 Alipay.com. All rights reserved.',
      extend: [
        {
          link: '/pages/list/app',
          text: '底部链接',
        },
      ],
    },
    footerInfo6: {
      type: 'link',
      content: '© 2004-2020 Alipay.com. All rights reserved.',
      extend: [
        {
          link: '/pages/list/app',
          text: '底部链接',
        },
        {
          link: '/pages/list/app',
          text: '底部链接',
        },
      ],
    },
    footerInfo7: {
      type: 'end',
      content: '自定义的没有更多内容的底线',
      footerEndColor: 'red',
    },
    footerInfo8: {
      type: 'end',
      showEndIcon: true,
      iconSize: 50,
    },
  },
  brandClick() {
    my.alert({
      content: '这个品牌 logo 没有链接，可通过 js 自定义点击事件。',
    });
  },
});

属性

Bug & Tip

• onBrandTap 仅在 type: brand 中有效，且是无链接的品牌 logo；
• 当选择不同的 type 时，extend 中的值也将会有所不同；
  • normal：无 extend；
  • guide：extend 的值为 [{ link: '', text: '',},]；
  • copyright：无 extend；
  • brand：extend 的值为 [{ logo: '', width: '', height: '', link: '',},]，如果无 link 的话，可选择触发 onBrandTap 事件；
  • link：extend 的值为 [{ link: '', text: '',},]，但有多个值时，文本链接之间会有间隔线出现；
  • end：显示为“没有更多了”字样的结尾，可更改为 am-icon 中的类型或者自定图片 url；
  • end 类型 content 默认值为“没有更多了”；
  • showEndIcon 时，content 内容将不再显示；
  • iconURL 有值时，am-icon 中的类型将不会展示，显示为 icon 的 url，请确保该 url 是可访问的。