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行,下载源码查看