graceImmersedStatusbar.nvue 739 B

123456789101112131415161718192021222324252627282930313233
  1. <template>
  2. <view>
  3. <view class="graceImmersedStatusbar" :class="[isFixed ? 'graceImmersedStatusbar-fixed' : '']" :style="{height:height, 'background-image':bgColor}"></view>
  4. <view :style="{height:height, width:'750rpx'}"></view>
  5. </view>
  6. </template>
  7. <script>
  8. export default {
  9. props:{
  10. bgColor : {
  11. type : String,
  12. default : "none"
  13. },
  14. isFixed : {
  15. type : Boolean,
  16. default : false
  17. }
  18. },
  19. data(){
  20. return{
  21. height : '0px'
  22. }
  23. },
  24. created:function(){
  25. var res = uni.getSystemInfoSync();
  26. this.height = res.statusBarHeight + 'px';
  27. }
  28. }
  29. </script>
  30. <style scoped>
  31. .graceImmersedStatusbar{height:20px; width:750rpx;}
  32. .graceImmersedStatusbar-fixed{position: fixed; left:0; top:0;}
  33. </style>