You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

nav-bar2.vue 2.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. <template>
  2. <view class="nav-bar" :class="scrollTop>navHeight?'nav-bg':''" :style="{height:navHeight+'px'}">
  3. <view class="title" :style="{paddingTop:searchMarginTop+'px',height:searchHeight+'px',lineHeight:searchHeight+'px'}">
  4. <block v-if="isBack && !isAlipay">
  5. <image :src="`/static/image/icon-back.png`"
  6. :style="{height:searchHeight+'px',width:searchHeight+'px'}" class="back" @click="back"></image>
  7. </block>
  8. <text>{{title}}</text>
  9. </view>
  10. </view>
  11. <view class="blank" :style="{height:navHeight+'px'}"></view>
  12. </template>
  13. <script setup lang="ts">
  14. import {
  15. onMounted,
  16. ref
  17. } from "vue";
  18. const navHeight = ref(0)
  19. const searchMarginTop = ref(0)
  20. const searchHeight = ref(0)
  21. const searchWidth = ref(0)
  22. const isAlipay = ref(false)
  23. onMounted(() => {
  24. const type = uni.getSystemInfoSync().uniPlatform
  25. isAlipay.value = type === 'mp-alipay'
  26. const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
  27. const {
  28. top,
  29. width,
  30. height,
  31. right
  32. } = menuButtonInfo
  33. uni.getSystemInfo({
  34. success: (res) => {
  35. const {
  36. statusBarHeight
  37. } = res
  38. const margin = top - statusBarHeight
  39. navHeight.value = (height + statusBarHeight + (margin * 2)) //导航栏总高
  40. searchMarginTop.value = statusBarHeight + margin // 状态栏 + 胶囊按钮边距
  41. searchHeight.value = height // 与胶囊按钮同高
  42. searchWidth.value = right - width // 胶囊按钮右边坐标 - 胶囊按钮宽度 = 按钮左边可使用宽度
  43. },
  44. })
  45. })
  46. const props = defineProps({
  47. title: {
  48. type: String,
  49. default: ''
  50. },
  51. isBack: {
  52. type: Boolean,
  53. default: true
  54. },
  55. scrollTop:{
  56. type:Number,
  57. default:0
  58. }
  59. })
  60. const back = () => {
  61. uni.navigateBack({
  62. delta: 1
  63. })
  64. }
  65. </script>
  66. <style scoped>
  67. .nav-bg{
  68. background: linear-gradient(to right,#13E7C1,#43A1E0);
  69. }
  70. .blank {
  71. width: 100%;
  72. display: none;
  73. }
  74. .nav-bar {
  75. /* background: linear-gradient(to left, #43A1E0 0%, #13E7C1 100%); */
  76. position: fixed;
  77. width: 100%;
  78. z-index: 999;
  79. }
  80. .nav-bar .title {
  81. text-align: center;
  82. width: 100%;
  83. font-size: 28rpx;
  84. font-weight: bold;
  85. position: relative;
  86. }
  87. .back {
  88. position: absolute;
  89. left: 10rpx;
  90. }
  91. </style>