index.vue 2.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. <template>
  2. <!-- <view class="nav-box" :style="{'height':height+'px','background':bgColor}">
  3. <view class="status_bar" :style="{'height':statusBarHeight+'px'}">
  4. </view>
  5. <view class="nav-main flex align-center justify-center" :style="{height: navBarHeight+'px'}">
  6. <view class="nav-main-back" @click="back" v-if="backIcon">
  7. <uni-icons type="back" size="26" color="#fff"></uni-icons>
  8. </view>
  9. <text class="nav-main-title">{{title}}</text>
  10. </view>
  11. </view> -->
  12. <u-navbar leftText="返回" title="工作台" titleStyle="font-szie:300px" :placeholder="true" :safeAreaInsetTop="true">
  13. </u-navbar>
  14. </template>
  15. <script>
  16. export default {
  17. props:{
  18. bgColor: {type:String,default: "#F5F5F5"},
  19. backIcon: {type: Boolean, default: true},
  20. title: {type:String,default:"二维码仓储积分"}
  21. },
  22. data() {
  23. return {
  24. //总高度
  25. height: 0,
  26. //胶囊位置信息
  27. menuButtonRect: {},
  28. //状态栏的高度
  29. statusBarHeight: 0 ,
  30. //导航栏的高度
  31. navBarHeight: 0
  32. }
  33. },
  34. created() {
  35. // this.height = wx.getStorageSync('navBarHeight')
  36. this.getHeight();
  37. },
  38. methods: {
  39. //获取屏幕导航栏高度
  40. getHeight(){
  41. if (wx.canIUse('getMenuButtonBoundingClientRect')) {
  42. let sysInfo = wx.getSystemInfoSync(); //状态栏的高度
  43. this.statusBarHeight = sysInfo.statusBarHeight;
  44. // 胶囊位置信息
  45. let rect = wx.getMenuButtonBoundingClientRect();
  46. this.menuButtonRect = JSON.parse(JSON.stringify(rect));
  47. // 导航栏高度
  48. let navBarHeight = (rect.top-sysInfo.statusBarHeight)*2+rect.height;
  49. this.navBarHeight = navBarHeight;
  50. // 自定义导航栏的高度
  51. this.height = sysInfo.statusBarHeight + navBarHeight;
  52. } else {
  53. wx.showToast({
  54. title: '您的微信版本过低,界面可能会显示不正常',
  55. icon: 'none',
  56. duration: 4000
  57. });
  58. }
  59. },
  60. //返回
  61. back() {
  62. uni.navigateBack({
  63. delta: 1
  64. })
  65. },
  66. }
  67. }
  68. </script>
  69. <style lang="scss" scoped>
  70. .status_bar {
  71. // height: var(--status-bar-height);
  72. width: 100%;
  73. // background:#ff0;
  74. }
  75. .nav-main{
  76. position: relative;
  77. // background:#f00;
  78. .nav-main-back{
  79. position: absolute;left: 10rpx;
  80. }
  81. .nav-main-title{color:#fff;font-size:16px;}
  82. }
  83. </style>