custom-navbar.vue 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. <template>
  2. <view class="icon-title-navBar-box">
  3. <!-- 状态栏填充(兼容刘海屏) -->
  4. <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
  5. <view class="icon-title-box">
  6. <view class="nav-bar-icon" v-if="showBackBtn" @click="handleBack"></view>
  7. <!-- 标题区域 -->
  8. <view class="nav-bar-title" :style="{fontSize: titleSize + 'rpx', color: titleColor}">
  9. {{ title }}
  10. </view>
  11. </view>
  12. </view>
  13. </template>
  14. <script>
  15. export default {
  16. props: {
  17. title: String,
  18. titleSize: { type: Number, default: 32 }, // 默认字号
  19. titleColor: { type: String, default: '#333' },
  20. showBackBtn:{type:Boolean, default: false}
  21. },
  22. data() {
  23. return {
  24. statusBarHeight: 0
  25. };
  26. },
  27. methods: {
  28. handleBack() {
  29. this.$emit('back')
  30. }
  31. },
  32. mounted() {
  33. // 获取状态栏高度(兼容不同设备)
  34. uni.getSystemInfo({
  35. success: (res) => {
  36. this.statusBarHeight = res.statusBarHeight;
  37. }
  38. });
  39. }
  40. };
  41. </script>
  42. <style>
  43. .custom-nav {
  44. width: 100%;
  45. background-color: #FFFFFF; /* 背景色 */
  46. display: flex;
  47. flex-direction: column;
  48. }
  49. .status-bar {
  50. width: 100%;
  51. }
  52. .nav-content {
  53. height: 44px; /* 导航栏主体高度 */
  54. display: flex;
  55. justify-content: center;
  56. align-items: center;
  57. }
  58. .nav-title {
  59. font-weight: bold; /* 可加粗 */
  60. }
  61. </style>