uni-navbar.vue 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
  1. <template>
  2. <view class="navbar custom-class" :style="{ 'height': navHeight+'px' }">
  3. <view class="navbar-action-wrap navbar-action-group row item-center" :style="{'top': navTop+'px'}">
  4. <view v-if="isBack" class="navbar-action_item" @tap="navBack">
  5. <u-icon name="arrow-left" color="#2979ff" size="28"></u-icon>
  6. </view>
  7. <view v-if="isMap" class="navbar-action_item last map-bar" @tap="toMap">
  8. <u-image class="map-icon" width="24rpx" height="36rpx" src="/static/map-icon.png"></u-image>
  9. <view class="item-label">清运地图</view>
  10. </view>
  11. </view>
  12. <view class='navbar-title' :style="{'top': navTop+'px'}">
  13. {{pageName}}
  14. </view>
  15. </view>
  16. </template>
  17. <script>
  18. export default {
  19. props: {
  20. pageName: String,
  21. showNav:{
  22. type: Boolean,
  23. value: true
  24. },
  25. bgColor: {
  26. type: String,
  27. value: '#fff'
  28. },
  29. isBack: {
  30. type: Boolean,
  31. value: false
  32. },
  33. isMap: {
  34. type: Boolean,
  35. value: false
  36. }
  37. },
  38. mounted() {
  39. let menuButtonObject = wx.getMenuButtonBoundingClientRect()
  40. const _this = this
  41. wx.getSystemInfo({
  42. success (res) {
  43. let statusBarHeight = res.statusBarHeight,
  44. navTop = menuButtonObject.top,//胶囊按钮与顶部的距离
  45. navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight)*2;//导航高度
  46. _this.navHeight = navHeight;
  47. _this.navTop = navTop;
  48. _this.windowHeight = res.windowHeight;
  49. }
  50. })
  51. },
  52. data() {
  53. return {
  54. navHeight: '',
  55. navTop: '',
  56. windowHeight: ''
  57. }
  58. },
  59. methods: {
  60. //回退
  61. navBack: function () {
  62. uni.navigateBack({
  63. delta: 1
  64. })
  65. },
  66. //配送地图
  67. toMap: function () {
  68. uni.navigateTo({
  69. url: '/pages/index/map'
  70. })
  71. }
  72. }
  73. }
  74. </script>
  75. <style lang="scss" scoped>
  76. .navbar {
  77. width: 100%;
  78. overflow: hidden;
  79. position: relative;
  80. top: 0;
  81. left: 0;
  82. z-index: 10;
  83. flex-shrink: 0;
  84. .navbar-action-wrap {
  85. display: -webkit-flex;
  86. display: flex;
  87. -webkit-box-align: center;
  88. -ms-flex-align: center;
  89. -webkit-align-items: center;
  90. align-items: center;
  91. position: absolute;
  92. left: 10px;
  93. z-index: 11;
  94. line-height: 1;
  95. padding-top: 8px;
  96. padding-bottom: 4px;
  97. }
  98. .navbar-action-group {
  99. overflow: hidden;
  100. .navbar-action_item {
  101. border-right: 1px solid #f0f0f0;
  102. color: #333;
  103. }
  104. .last {
  105. border-right: none;
  106. }
  107. .map-bar{
  108. text-align: center;
  109. .map-icon{
  110. display: inline-block;
  111. margin-right: 10rpx;
  112. }
  113. .item-label{
  114. display: inline-block;
  115. font-size: 24rpx;
  116. vertical-align: text-top;
  117. color: #07c160;
  118. }
  119. }
  120. }
  121. .navbar-title {
  122. width: 100%;
  123. box-sizing: border-box;
  124. padding-left: 115px;
  125. padding-right: 115px;
  126. height: 32px;
  127. line-height: 32px;
  128. text-align: center;
  129. position: absolute;
  130. left: 0;
  131. z-index: 10;
  132. color: #333;
  133. font-size: 16px;
  134. font-weight: bold;
  135. text-overflow: ellipsis;
  136. overflow: hidden;
  137. white-space: nowrap;
  138. }
  139. }
  140. </style>