footer

Footer 页脚

组件结构

  1. <template>
  2.     <view class="tui-footer-class tui-footer" :class="[fixed?'tui-fixed':'']" :style='{background:bgcolor}'>
  3.         <view class="tui-footer-link" v-if="navigate.length>0">
  4.             <block v-for="(item,index) in navigate" :key="index">
  5.                 <navigator class="tui-link" hover-class="tui-link-hover" hover-stop-propagation="true" :style="{color:(item.color || '#596d96'),fontSize:px(item.size || 28)}"
  6.                  :open-type="item.type" :url="item.url" :target="item.target" :delta="item.delta" :app-id="item.appid"
  7.                  :path="item.path" :extra-data="item.extradata" :bindsuccess="item.bindsuccess" :bindfail="item.bindfail">{{item.text}}</navigator>
  8.             </block>
  9.         </view>
  10.         <view class="tui-footer-copyright" :style="{color:color,fontSize:px(size)}">
  11.             {{copyright}}
  12.         </view>
  13.     </view>
  14. </template>

组件脚本

  1. <script>
  2.     export default {
  3.         name: "tuiFooter",
  4.         props: {
  5.             //type target url delta appid path extradata bindsuccess bindfail text color size
  6.             //链接设置  数据格式对应上面注释的属性值
  7.             navigate: {
  8.                 type: Array,
  9.                 default: []
  10.             },
  11.             //底部文本
  12.             copyright: {
  13.                 type: String,
  14.                 default: "All Rights Reserved."
  15.             },
  16.             //copyright 字体颜色
  17.             color: {
  18.                 type: String,
  19.                 default: "#A7A7A7"
  20.             },
  21.             //copyright 字体大小
  22.             size: {
  23.                 type: Number,
  24.                 default: 24
  25.             },
  26.             //footer背景颜色
  27.             bgcolor: {
  28.                 type: String,
  29.                 default: "none"
  30.             },
  31.             //是否固定在底部
  32.             fixed: {
  33.                 type: Boolean,
  34.                 default: true
  35.             }
  36.         },
  37.         methods: {
  38.             px(num) {
  39.                 return uni.upx2px(num) + 'px'
  40.             }
  41.         }
  42.     }
  43. </script>

组件样式

... 此处省略n行

脚本说明

 props: 
     "navigate" : 链接设置,参考官方文档,类型:"Array",默认值:[]    
     "copyright" :底部文本， 类型:"String",默认值:"All Rights Reserved."
     "color" :copyright 字体颜色,类型:"String",默认值:"#A7A7A7"
     "size":copyright 字体大小 upx，类型:"Number",默认值:24
     "bgcolor":footer背景颜色，类型:"String",默认值:"none"
     "fixed":是否固定在底部，类型:"Boolean",默认值:true

 methods:
   "px":upx转px，目前已支持动态绑定upx，后期会移除

示例

... 此处省略n行,下载源码查看