123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141 |
- <template>
- <view class="u-tabbar">
- <view
- class="u-tabbar__content"
- ref="u-tabbar__content"
- @touchmove.stop.prevent="noop"
- :class="[border && 'u-border-top', fixed && 'u-tabbar--fixed']"
- :style="[tabbarStyle]"
- >
- <view class="u-tabbar__content__item-wrapper">
- <slot />
- </view>
- <u-safe-bottom v-if="safeAreaInsetBottom"></u-safe-bottom>
- </view>
- <view
- class="u-tabbar__placeholder"
- v-if="placeholder"
- :style="{
- height: placeholderHeight + 'px',
- }"
- ></view>
- </view>
- </template>
- <script>
- import props from './props.js';
-
- const dom = uni.requireNativePlugin('dom')
-
-
- export default {
- name: 'u-tabbar',
- mixins: [uni.$u.mpMixin, uni.$u.mixin,props],
- data() {
- return {
- placeholderHeight: 0
- }
- },
- computed: {
- tabbarStyle() {
- const style = {
- zIndex: this.zIndex
- }
-
- return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle))
- },
-
- updateChild() {
- return [this.value, this.activeColor, this.inactiveColor]
- },
- updatePlaceholder() {
- return [this.fixed, this.placeholder]
- }
- },
- watch: {
- updateChild() {
-
- this.updateChildren()
- },
- updatePlaceholder() {
-
- this.setPlaceholderHeight()
- }
- },
- created() {
- this.children = []
- },
- mounted() {
- this.setPlaceholderHeight()
- },
- methods: {
- updateChildren() {
-
- this.children.length && this.children.map(child => child.updateFromParent())
- },
-
- async setPlaceholderHeight() {
- if (!this.fixed || !this.placeholder) return
-
- await uni.$u.sleep(20)
-
- this.$uGetRect('.u-tabbar__content').then(({height = 50}) => {
-
- this.placeholderHeight = height
- })
-
-
- dom.getComponentRect(this.$refs['u-tabbar__content'], (res) => {
- const {
- size
- } = res
- this.placeholderHeight = size.height
- })
-
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- @import "../../libs/css/components.scss";
- .u-tabbar {
- @include flex(column);
- flex: 1;
- justify-content: center;
-
- &__content {
- @include flex(column);
- background-color: #fff;
-
- &__item-wrapper {
- height: 50px;
- @include flex(row);
- }
- }
- &--fixed {
- position: fixed;
- bottom: 0;
- left: 0;
- right: 0;
- }
- }
- </style>
|