sklineHeader.vue 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. <template>
  2. <view class="scrollPage-header">
  3. <view :style="{height:statusBarHeight+'px'}"></view>
  4. <view class="header-title-box">
  5. <view class="header-left" @click="goBack">
  6. <uni-icons type="arrowleft" size="20"></uni-icons>
  7. <text>{{isShare?'首页':'返回'}}</text>
  8. </view>
  9. <view class="header-title"><text :max-lines="1" overflow="ellipsis">{{title}}</text></view>
  10. <view class="header-right">
  11. </view>
  12. </view>
  13. </view>
  14. </template>
  15. <script>
  16. export default {
  17. name: "sklineHeader",
  18. props: {
  19. title: {
  20. type: String,
  21. default: '标题'
  22. },
  23. isShare: {
  24. type: Boolean,
  25. default: false
  26. }
  27. },
  28. data() {
  29. return {
  30. statusBarHeight: 0,
  31. };
  32. },
  33. created() {
  34. this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
  35. },
  36. methods: {
  37. goBack() {
  38. if(this.isShare){
  39. uni.reLaunch({
  40. url: '/pages/index/index'
  41. })
  42. }else{
  43. uni.navigateBack()
  44. }
  45. },
  46. }
  47. }
  48. </script>
  49. <style lang="less">
  50. .scrollPage-header{
  51. z-index: 1;
  52. .header-title-box{
  53. display: flex;
  54. align-items: center;
  55. justify-content: space-between;
  56. padding: 0 10px;
  57. height: 44px;
  58. background-color: #FFFFFF;
  59. border-bottom: 1px solid #e8e8e8;
  60. .header-title{
  61. font-size: 16px;
  62. color: #333333;
  63. max-width: 70%;
  64. }
  65. .header-left{
  66. display: flex;
  67. align-items: center;
  68. text{
  69. font-size: 14px;
  70. color: #333333;
  71. margin-left: 2px;
  72. }
  73. }
  74. .header-right{
  75. width: 50px;
  76. }
  77. }
  78. }
  79. </style>