支付寶小程序擴展組件 頁腳·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: '過往業(yè)績不預示產(chǎn)品未來表現(xiàn)，市場有風險，投資需謹慎',


      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: '自定義的沒有更多內(nèi)容的底線',


      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 的話，可選擇觸發(fā) onBrandTap 事件；
  • link：extend 的值為 [{ link: '', text: '',},]，但有多個值時，文本鏈接之間會有間隔線出現(xiàn)；
  • end：顯示為“沒有更多了”字樣的結(jié)尾，可更改為 am-icon 中的類型或者自定圖片 url；
  • end 類型 content 默認值為“沒有更多了”；
  • showEndIcon 時，content 內(nèi)容將不再顯示；
  • iconURL 有值時，am-icon 中的類型將不會展示，顯示為 icon 的 url，請確保該 url 是可訪問的。