uni-navbar.vue 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
  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. console.log(res)
  44. let statusBarHeight = res.statusBarHeight,
  45. navTop = menuButtonObject.top,//胶囊按钮与顶部的距离
  46. navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight)*2;//导航高度
  47. _this.navHeight = navHeight;
  48. _this.navTop = navTop;
  49. _this.windowHeight = res.windowHeight;
  50. }
  51. })
  52. },
  53. data() {
  54. return {
  55. navHeight: '',
  56. navTop: '',
  57. windowHeight: ''
  58. }
  59. },
  60. methods: {
  61. //回退
  62. navBack: function () {
  63. uni.navigateBack({
  64. delta: 1
  65. })
  66. },
  67. //配送地图
  68. toMap: function () {
  69. uni.navigateTo({
  70. url: '/pages/index/map'
  71. })
  72. }
  73. }
  74. }
  75. </script>
  76. <style lang="scss" scoped>
  77. .navbar {
  78. width: 100%;
  79. overflow: hidden;
  80. position: relative;
  81. top: 0;
  82. left: 0;
  83. z-index: 10;
  84. flex-shrink: 0;
  85. .navbar-action-wrap {
  86. display: -webkit-flex;
  87. display: flex;
  88. -webkit-box-align: center;
  89. -ms-flex-align: center;
  90. -webkit-align-items: center;
  91. align-items: center;
  92. position: absolute;
  93. left: 10px;
  94. z-index: 11;
  95. line-height: 1;
  96. padding-top: 8px;
  97. padding-bottom: 4px;
  98. }
  99. .navbar-action-group {
  100. overflow: hidden;
  101. .navbar-action_item {
  102. border-right: 1px solid #f0f0f0;
  103. color: #333;
  104. }
  105. .last {
  106. border-right: none;
  107. }
  108. .map-bar{
  109. text-align: center;
  110. .map-icon{
  111. display: inline-block;
  112. margin-right: 10rpx;
  113. }
  114. .item-label{
  115. display: inline-block;
  116. font-size: 24rpx;
  117. vertical-align: text-top;
  118. color: #07c160;
  119. }
  120. }
  121. }
  122. .navbar-title {
  123. width: 100%;
  124. box-sizing: border-box;
  125. padding-left: 115px;
  126. padding-right: 115px;
  127. height: 32px;
  128. line-height: 32px;
  129. text-align: center;
  130. position: absolute;
  131. left: 0;
  132. z-index: 10;
  133. color: #333;
  134. font-size: 16px;
  135. font-weight: bold;
  136. text-overflow: ellipsis;
  137. overflow: hidden;
  138. white-space: nowrap;
  139. }
  140. }
  141. </style>