navBar.wxml 1.3 KB

12345678910111213141516171819202122232425262728
  1. <!--myComponents/navBar/navBar.wxml-->
  2. <!-- 自定义顶部栏 -->
  3. <view class="uni-pages">
  4. <!-- 自定义背景色,支持渐变色 -->
  5. <view class="navigation" style="background:{{bgcolor}}">
  6. <!-- 自适应不同的手机机型,导航顶部留白部分 -->
  7. <view class="nav--bar-top" style="height:{{menuTop}}px"></view>
  8. <view class="nav-bar-inner">
  9. <!-- 导航左边部分,是否显示操作胶囊 -->
  10. <view class="image-box" wx:if="{{control}}" style=" height:{{menuHeight}}px;width:{{menuWidth - 20}}px">
  11. <view class="image iconfont myIconfanhui" style="font-size: 55rpx;" bind:tap="clickBack"></view>
  12. <view class="line"></view>
  13. <view class="image iconfont myIconzhuye1" bind:tap="clickHome"></view>
  14. </view>
  15. <view class="base-box"
  16. style="height:{{menuHeight}}px;width:{{menuWidth}}px" wx:else></view>
  17. <!-- 中间文字部分,可设置字体颜色 -->
  18. <view class="title" style="color:{{color}}">{{title}}</view>
  19. <!-- 右边部分,占据小程序系统胶囊位置 -->
  20. <view class="base-box" style="height:{{menuHeight}}px;width:{{menuWidth}}px"></view>
  21. </view>
  22. <!-- 设置胶囊离内容距离 -->
  23. <view class="nav-bar-buttom" style="height: 8px;"></view>
  24. </view>
  25. </view>