u-tabbar.vue 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
  1. <template>
  2. <view class="u-tabbar">
  3. <view
  4. class="u-tabbar__content"
  5. ref="u-tabbar__content"
  6. @touchmove.stop.prevent="noop"
  7. :class="[border && 'u-border-top', fixed && 'u-tabbar--fixed']"
  8. :style="[tabbarStyle]"
  9. >
  10. <view class="u-tabbar__content__item-wrapper">
  11. <slot />
  12. </view>
  13. <u-safe-bottom v-if="safeAreaInsetBottom"></u-safe-bottom>
  14. </view>
  15. <view
  16. class="u-tabbar__placeholder"
  17. v-if="placeholder"
  18. :style="{
  19. height: placeholderHeight + 'px',
  20. }"
  21. ></view>
  22. </view>
  23. </template>
  24. <script>
  25. import props from './props.js';
  26. // #ifdef APP-NVUE
  27. const dom = uni.requireNativePlugin('dom')
  28. // #endif
  29. /**
  30. * Tabbar 底部导航栏
  31. * @description 此组件提供了自定义tabbar的能力。
  32. * @tutorial https://www.uviewui.com/components/tabbar.html
  33. * @property {String | Number} value 当前匹配项的name
  34. * @property {Boolean} safeAreaInsetBottom 是否为iPhoneX留出底部安全距离(默认 true )
  35. * @property {Boolean} border 是否显示上方边框(默认 true )
  36. * @property {String | Number} zIndex 元素层级z-index(默认 1 )
  37. * @property {String} activeColor 选中标签的颜色(默认 '#1989fa' )
  38. * @property {String} inactiveColor 未选中标签的颜色(默认 '#7d7e80' )
  39. * @property {Boolean} fixed 是否固定在底部(默认 true )
  40. * @property {Boolean} placeholder fixed定位固定在底部时,是否生成一个等高元素防止塌陷(默认 true )
  41. * @property {Object} customStyle 定义需要用到的外部样式
  42. *
  43. * @example <u-tabbar :value="value2" :placeholder="false" @change="name => value2 = name" :fixed="false" :safeAreaInsetBottom="false"><u-tabbar-item text="首页" icon="home" dot ></u-tabbar-item></u-tabbar>
  44. */
  45. export default {
  46. name: 'u-tabbar',
  47. mixins: [uni.$u.mpMixin, uni.$u.mixin,props],
  48. data() {
  49. return {
  50. placeholderHeight: 0
  51. }
  52. },
  53. computed: {
  54. tabbarStyle() {
  55. const style = {
  56. zIndex: this.zIndex
  57. }
  58. // 合并来自父组件的customStyle样式
  59. return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle))
  60. },
  61. // 监听多个参数的变化,通过在computed执行对应的操作
  62. updateChild() {
  63. return [this.value, this.activeColor, this.inactiveColor]
  64. },
  65. updatePlaceholder() {
  66. return [this.fixed, this.placeholder]
  67. }
  68. },
  69. watch: {
  70. updateChild() {
  71. // 如果updateChildren中的元素发生了变化,则执行子元素初始化操作
  72. this.updateChildren()
  73. },
  74. updatePlaceholder() {
  75. // 如果fixed,placeholder等参数发生变化,重新计算占位元素的高度
  76. this.setPlaceholderHeight()
  77. }
  78. },
  79. created() {
  80. this.children = []
  81. },
  82. mounted() {
  83. this.setPlaceholderHeight()
  84. },
  85. methods: {
  86. updateChildren() {
  87. // 如果存在子元素,则执行子元素的updateFromParent进行更新数据
  88. this.children.length && this.children.map(child => child.updateFromParent())
  89. },
  90. // 设置用于防止塌陷元素的高度
  91. async setPlaceholderHeight() {
  92. if (!this.fixed || !this.placeholder) return
  93. // 延时一定时间
  94. await uni.$u.sleep(20)
  95. // #ifndef APP-NVUE
  96. this.$uGetRect('.u-tabbar__content').then(({height = 50}) => {
  97. // 修复IOS safearea bottom 未填充高度
  98. this.placeholderHeight = height
  99. })
  100. // #endif
  101. // #ifdef APP-NVUE
  102. dom.getComponentRect(this.$refs['u-tabbar__content'], (res) => {
  103. const {
  104. size
  105. } = res
  106. this.placeholderHeight = size.height
  107. })
  108. // #endif
  109. }
  110. }
  111. }
  112. </script>
  113. <style lang="scss" scoped>
  114. @import "../../libs/css/components.scss";
  115. .u-tabbar {
  116. @include flex(column);
  117. flex: 1;
  118. justify-content: center;
  119. &__content {
  120. @include flex(column);
  121. background-color: #fff;
  122. &__item-wrapper {
  123. height: 50px;
  124. @include flex(row);
  125. }
  126. }
  127. &--fixed {
  128. position: fixed;
  129. bottom: 0;
  130. left: 0;
  131. right: 0;
  132. }
  133. }
  134. </style>