header-poduct.vue 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191
  1. <template name="headerNavbar">
  2. <!-- 自定义导航栏 -->
  3. <view class='navbar-wrap' :class="[headerColor? 'bg-color' : 'no-color']" :style="{height:navbarHeight+'px',paddingTop:statusBarHeight+'px'}"> 
  4.   <view class="navbar-text" :style="{lineHeight:(navbarHeight - statusBarHeight)+'px;',fontSize:fontSizeSetting+'px;'}">
  5.     {{navbarData.title ? navbarData.title : " "}}
  6.   </view>
  7.   <view class="navbar-icon" v-if="navbarData.showCapsule ? navbarData.showCapsule : true"
  8. :style="{top:navbarBtn.top + statusBarHeight+'px;',lineHeight:navbarBtn.height+'px;',left:(navbarBtn.right+5)+'px;',width:navbarBtn.height+'px;',height:navbarBtn.height+'px;'}">
  9. <text v-if='haveBack' @click="_goBack" class="iconfont icon-fanhui"></text>
  10.   </view>
  11. </view>
  12. </template>
  13. <script>
  14. var self;
  15. export default{
  16. name:'headerNavbar',
  17. props:{
  18. navbarData: { // 由父页面传递的数据
  19. type: Object
  20. },
  21. systeminfo:{
  22. type:Object
  23. },
  24. headerBtnPosi:{
  25. type:Object
  26. },
  27. page:{
  28. type:Number
  29. },
  30. headerColor:{
  31. type:Boolean
  32. },
  33. headerTitle:{
  34. type:String
  35. }
  36. },
  37. data() {
  38. return{
  39. haveBack: true, // 是否有返回按钮,true 有 false 没有 若从分享页进入则为 false
  40.     statusBarHeight: 0, // 状态栏高度
  41.     navbarHeight: 0, // 顶部导航栏高度,
  42.     navbarBtn: { // 胶囊位置信息
  43.       height: 0,
  44.       width: 0,
  45.       top: 0,
  46.       bottom: 0,
  47.       right: 0
  48. },
  49. platform:'',
  50. fontSizeSetting:0
  51. }
  52. },
  53. created() {
  54. // console.log(this.systeminfo);
  55. // console.log(this.headerBtnPosi);
  56. // console.log(this.headerColor)
  57. this.fontSizeSetting = this.systeminfo.fontSizeSetting
  58. let statusBarHeight = this.systeminfo.statusBarHeight // 状态栏高度
  59. let headerPosi = this.headerBtnPosi // 胶囊位置信息
  60.     /**
  61.      * wx.getMenuButtonBoundingClientRect() 坐标信息以屏幕左上角为原点
  62.      * 菜单按键宽度: 87
  63.      * 菜单按键高度: 32
  64.      * 菜单按键左边界坐标: 278
  65.      * 菜单按键上边界坐标: 26
  66.      * 菜单按键右边界坐标: 365
  67.      * 菜单按键下边界坐标: 58
  68.      */
  69. let btnPosi = { // 胶囊实际位置,坐标信息不是左上角原点
  70.       height: headerPosi.height,
  71.       width: headerPosi.width,
  72.       // 胶囊top - 状态栏高度
  73.       top: headerPosi.top - statusBarHeight,
  74.       // 胶囊bottom - 胶囊height - 状态栏height (现胶囊bottom 为距离导航栏底部的长度)
  75.       bottom: headerPosi.bottom - headerPosi.height - statusBarHeight,
  76.       // 屏幕宽度 - 胶囊right
  77.       right: this.systeminfo.screenWidth - headerPosi.right
  78. }
  79. let haveBack;
  80. if (getCurrentPages().length === 1) { // 当只有一个页面时
  81.      haveBack = false;
  82. } else {
  83.      haveBack = true;
  84. }
  85.     this.haveBack=haveBack, // 获取是否是通过分享进入的小程序
  86.     this.statusBarHeight=statusBarHeight,
  87.     this.navbarHeight= headerPosi.bottom + btnPosi.bottom, // 原胶囊bottom + 现胶囊bottom
  88. this.$parent.navbarHeight = this.navbarHeight
  89. this.$parent.statusBarHeight = this.statusBarHeight
  90. // console.log(this.navbarHeight);
  91.     this.navbarBtn=btnPosi
  92. },
  93. onLoad(){
  94. },
  95. methods:{
  96. _goBack: function () {
  97.       uni.navigateBack({
  98.         delta: this.page
  99.       });
  100.     },
  101.     _goHome: function () {
  102.       uni.switchTab({
  103.         url: '/pages/tabBar/home/home'
  104.       })
  105.     }
  106. },
  107. onShow(){
  108. }
  109. }
  110. </script>
  111. <style lang="scss">
  112. .navbar-wrap {
  113. position: fixed;
  114. width: 100%;
  115. top: 0;
  116. z-index: 9999;
  117. box-sizing: border-box;
  118. &.bg-color{
  119. animation: showColor 0.3s ease-in-out both;
  120. }
  121. &.no-color{
  122. animation: hideColor 0.3s ease-in-out both;
  123. }
  124. }
  125. .navbar-text {
  126. text-align: center;
  127. color: #000000;
  128. font-weight: 500;
  129. }
  130. .navbar-icon {
  131. position: fixed;
  132. display: flex;
  133. border-radius: 50%;
  134. text-align: center;
  135. background: rgba(255,255,255,0.2);
  136. border: 1px solid rgba(0,0,0, 0.2);
  137. box-sizing: border-box;
  138. }
  139. .navbar-icon .iconfont {
  140. height: 100%;
  141. width: 100%;
  142. font-size: 38rpx;
  143. font-weight: bold;
  144. display: inline-block;
  145. overflow: hidden;
  146. }
  147. .navbar-icon view {
  148. height: 18px;
  149. border-left: 0.5px solid rgba(0,0,0, 0.3);
  150. margin-top: 6px;
  151. }
  152. .navbar-loading {
  153. background: #fff;
  154. text-align: center;
  155. }
  156. @keyframes showColor {
  157. 0% {background: rgba(255,255,255,0);}
  158. 50% {background: rgba(255,255,255,0.5);}
  159. 100% {background: rgba(255,255,255,1);}
  160. }
  161. @keyframes hideColor {
  162. 0% {background: rgba(255,255,255,1);}
  163. 50% {background: rgba(255,255,255,0.5);}
  164. 100% {background: rgba(255,255,255,0);}
  165. }
  166. </style>