From e13367edf304cb78f978e321f1679299a66b3a23 Mon Sep 17 00:00:00 2001 From: quanyawei <401863037@qq.com> Date: Wed, 10 Jan 2024 16:08:18 +0800 Subject: [PATCH] fix:地图 --- uni_modules/uview-ui/components/u-tabbar/u-tabbar.vue | 141 +++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 141 insertions(+), 0 deletions(-) diff --git a/uni_modules/uview-ui/components/u-tabbar/u-tabbar.vue b/uni_modules/uview-ui/components/u-tabbar/u-tabbar.vue new file mode 100644 index 0000000..953f33a --- /dev/null +++ b/uni_modules/uview-ui/components/u-tabbar/u-tabbar.vue @@ -0,0 +1,141 @@ +<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'; + // #ifdef APP-NVUE + const dom = uni.requireNativePlugin('dom') + // #endif + /** + * Tabbar ��������������� + * @description ���������������������������tabbar������������ + * @tutorial https://www.uviewui.com/components/tabbar.html + * @property {String | Number} value ������������������name + * @property {Boolean} safeAreaInsetBottom ���������iPhoneX��������������������������������� true ��� + * @property {Boolean} border ��������������������������������� true ��� + * @property {String | Number} zIndex ������������z-index��������� 1 ��� + * @property {String} activeColor ������������������������������ '#1989fa' ��� + * @property {String} inactiveColor ��������������������������������� '#7d7e80' ��� + * @property {Boolean} fixed ������������������������������ true ��� + * @property {Boolean} placeholder fixed������������������������������������������������������������������������������ true ��� + * @property {Object} customStyle ��������������������������������� + * + * @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> + */ + export default { + name: 'u-tabbar', + mixins: [uni.$u.mpMixin, uni.$u.mixin,props], + data() { + return { + placeholderHeight: 0 + } + }, + computed: { + tabbarStyle() { + const style = { + zIndex: this.zIndex + } + // ������������������������customStyle������ + return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle)) + }, + // ���������������������������������������computed��������������������� + updateChild() { + return [this.value, this.activeColor, this.inactiveColor] + }, + updatePlaceholder() { + return [this.fixed, this.placeholder] + } + }, + watch: { + updateChild() { + // ������updateChildren��������������������������������������������������������������� + this.updateChildren() + }, + updatePlaceholder() { + // ������fixed���placeholder��������������������������������������������������������� + this.setPlaceholderHeight() + } + }, + created() { + this.children = [] + }, + mounted() { + this.setPlaceholderHeight() + }, + methods: { + updateChildren() { + // ���������������������������������������������updateFromParent������������������ + this.children.length && this.children.map(child => child.updateFromParent()) + }, + // ��������������������������������������� + async setPlaceholderHeight() { + if (!this.fixed || !this.placeholder) return + // ������������������ + await uni.$u.sleep(20) + // #ifndef APP-NVUE + this.$uGetRect('.u-tabbar__content').then(({height = 50}) => { + // ������IOS safearea bottom ��������������� + this.placeholderHeight = height + }) + // #endif + + // #ifdef APP-NVUE + dom.getComponentRect(this.$refs['u-tabbar__content'], (res) => { + const { + size + } = res + this.placeholderHeight = size.height + }) + // #endif + } + } + } +</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> -- Gitblit v1.8.0