navbar.nvue 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128
  1. <template>
  2. <view class="u-page">
  3. <!-- 2.0.19支持autoBack,默认为false -->
  4. <u-navbar
  5. title="导航栏"
  6. safeAreaInsetTop
  7. fixed
  8. placeholder
  9. :autoBack="true"
  10. >
  11. </u-navbar>
  12. <view class="u-page__item">
  13. <text class="u-page__item__title">基础功能</text>
  14. <u-navbar
  15. title="个人中心"
  16. :safeAreaInsetTop="false"
  17. :fixed="false"
  18. @rightClick="rightClick"
  19. @leftClick="leftClick"
  20. >
  21. </u-navbar>
  22. </view>
  23. <view class="u-page__item">
  24. <text class="u-page__item__title">自定义文本</text>
  25. <u-navbar
  26. :safeAreaInsetTop="false"
  27. title="个人中心"
  28. :fixed="false"
  29. left-text="返回"
  30. rightIcon="map"
  31. >
  32. </u-navbar>
  33. </view>
  34. <view class="u-page__item">
  35. <text class="u-page__item__title">自定义插槽</text>
  36. <u-navbar
  37. leftText="返回"
  38. :fixed="false"
  39. title="个人中心"
  40. :safeAreaInsetTop="false"
  41. >
  42. <view
  43. class="u-nav-slot"
  44. slot="left"
  45. >
  46. <u-icon
  47. name="arrow-left"
  48. size="19"
  49. ></u-icon>
  50. <u-line
  51. direction="column"
  52. :hairline="false"
  53. length="16"
  54. margin="0 8px"
  55. ></u-line>
  56. <u-icon
  57. name="home"
  58. size="20"
  59. ></u-icon>
  60. </view>
  61. </u-navbar>
  62. </view>
  63. <u-gap height="50"></u-gap>
  64. </view>
  65. </template>
  66. <script>
  67. export default {
  68. data() {
  69. return {
  70. }
  71. },
  72. methods: {
  73. navigateBack() {
  74. uni.navigateBack({
  75. delta: 1
  76. })
  77. },
  78. rightClick() {
  79. console.log('rightClick');
  80. },
  81. leftClick() {
  82. console.log('leftClick');
  83. }
  84. }
  85. }
  86. </script>
  87. <style lang="scss">
  88. /* #ifndef APP-NVUE */
  89. page {
  90. background-color: $u-bg-color;
  91. }
  92. /* #endif */
  93. .u-page {
  94. padding: 0;
  95. flex: 1;
  96. background-color: $u-bg-color;
  97. &__item {
  98. &__title {
  99. color: $u-tips-color;
  100. background-color: $u-bg-color;
  101. padding: 15px;
  102. font-size: 15px;
  103. &__slot-title {
  104. color: $u-primary;
  105. font-size: 14px;
  106. }
  107. }
  108. }
  109. }
  110. .u-nav-slot {
  111. @include flex;
  112. align-items: center;
  113. justify-content: space-between;
  114. border-width: 0.5px;
  115. border-radius: 100px;
  116. border-color: $u-border-color;
  117. padding: 3px 7px;
  118. opacity: 0.8;
  119. }
  120. </style>