navBar.wxml 1.5 KB

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