footer

Footer 页脚

组件结构

  1. <template>
  2. <viewclass="tui-footer-class tui-footer" :class="[fixed?'tui-fixed':'']" :style='{background:bgcolor}'>
  3. <viewclass="tui-footer-link"v-if="navigate.length>0">
  4. <blockv-for="(item,index) in navigate" :key="index">
  5. <navigatorclass="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. <viewclass="tui-footer-copyright" :style="{color:color,fontSize:px(size)}">
  11. {{copyright}}
  12. </view>
  13. </view>
  14. </template>

组件脚本

  1. <script>
  2. exportdefault{
  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行,下载源码查看

dropdown-list grid