uniapp-自定义导航栏(渐变色+可封装组件通用)

由于普通的导航栏已经满足不了产品的定位,可采用自定义导航栏,封装成通用组件,在其他页面进行使用。

 第一步设置pages.json中pages中的style字段

 "navigationStyle": "custom",

核心代码:
 

获取胶囊的top设置上方导航距离,获取height设置导航的高度。 

uni.getMenuButtonBoundingClientRect()//获取胶囊

原生写法 

<template>
  <view class="tab_set">
    <!-- 设置胶囊顶部 -->
    <view class="MenuButton_top"></view>
    <!-- 实际导航栏 可封装自定义组件  -->
    <view class="back_Tag" v-if="top">{{ str }} </view>
  </view>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app';
import { ref } from "vue";
// 箭头 由于直接写箭头程序报错 只能赋值变量
const str = ref('<')
// 获取胶囊的距离
const top = ref('')//上方距离
const pageheight = ref('')//整个导航栏高度
const height = ref('')//实际导航栏高度
onLoad(() => {
  const res = uni.getMenuButtonBoundingClientRect()//获取胶囊
  top.value = res.top + 'px'
  pageheight.value = (res.height + 10 + res.top) + 'px'
  height.value = res.height + 'px'
  console.log('获取胶囊位置', height.value);
})
</script>

<style lang="scss" scoped>
// 整个导航栏样式
.tab_set {
  background: linear-gradient(rgb(82, 82, 247), rgb(218, 218, 248));
  height: v-bind('pageheight');

  // 上方距离空隙
  .MenuButton_top {
    height: v-bind('top');
  }

  // 内部导航栏
  .back_Tag {
    height: v-bind('height');
    line-height: v-bind('height');
    font-size: 35px;
    font-weight: 300;
    margin-left: 20px;
  }
}
</style>

加uniapp箭头图标，需要导入ubiapp-icon图

<template>
  <view class="tab_set">
    <!-- 设置胶囊顶部 -->
    <view class="MenuButton_top"></view>
    <!-- 实际导航栏 可封装自定义组件  -->
    <view class="back_Tag" v-if="top">  <uni-icons type="left" size="25"></uni-icons></view>
  </view>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app';
import { ref } from "vue";
// 箭头 由于直接写箭头程序报错 只能赋值变量
const str = ref('<')
// 获取胶囊的距离
const top = ref('')//上方距离
const pageheight = ref('')//整个导航栏高度
const height = ref('')//实际导航栏高度
onLoad(() => {
  const res = uni.getMenuButtonBoundingClientRect()//获取胶囊
  top.value = res.top + 'px'
  pageheight.value = (res.height + 10 + res.top) + 'px'
  height.value = res.height + 'px'
  console.log('获取胶囊位置', height.value);
})
</script>

<style lang="scss" scoped>
// 整个导航栏样式
.tab_set {
  background: linear-gradient(rgb(82, 82, 247), rgb(218, 218, 248));
  height: v-bind('pageheight');

  // 上方距离空隙
  .MenuButton_top {
    height: v-bind('top');
  }

  // 内部导航栏
  .back_Tag {
    height: v-bind('height');
    line-height: v-bind('height');
    // font-size: 20px;
    font-weight: 700;
    margin-left: 10rpx;
  }
}
</style>