<template>
<view class="nav_custom_bar" :style="{ height: `${navBarHeight}rpx` }">
<image
class="nav_custom_bar_back"
src="../../other/dinner/fanhui.png"
@tap="goBackPage"
v-if="needBackIcon!=false"
/>
<text class="nav_custom_bar_title" :style="{color:textColor?textColor:'black'}">{{ mainTitle }}</text>
<view></view>
</view>
</template>
<script>
import Taro from "@tarojs/taro";
import { ref } from "vue";
import "./index.less";
export default {
// 是否展示返回箭头 主标题 标题颜色
props: ["needBackIcon", "mainTitle","textColor"],
setup(props, content) {
let mainTitle = ref("");
mainTitle.value = props.mainTitle;
// 获取标题框总高度
let navBarHeight = ref(0);
// 是否显示返回图标
let needBackIcon = ref(true);
needBackIcon.value = props.needBackIcon;
let menuButtonObject = Taro.getMenuButtonBoundingClientRect();
var sysinfo = Taro.getSystemInfoSync();
let statusBarHeight = sysinfo.statusBarHeight;
let menuBottonHeight = menuButtonObject.height;
let menuBottonTop = menuButtonObject.top;
let navBarHeights =
statusBarHeight +
menuBottonHeight +
(menuBottonTop - statusBarHeight) * 2;
navBarHeight.value = navBarHeights * 2;
Taro.setStorageSync("navBarHeight", navBarHeight.value);
const goBackPage = () => {
Taro.navigateBack({
delta: 1,
});
};
return {
navBarHeight,
goBackPage,
needBackIcon,
mainTitle,
};
}
};
</script>
Vue3+Taro封装的顶部Tab
最新推荐文章于 2024-06-27 09:18:28 发布