开始

image.png

image.png

image.png

  1. "app-plus": {
  2.                     "titleNView": false
  3.                 }

引入自定义导航栏

image.png
复制发布页的 过来改改

image.png

image.png

image.png

image.png

  1. <uni-nav-bar :statusBar="true" @clickRight="openAdd">
  2. </uni-nav-bar>

左边和右边的插槽
image.png
图标库
image.png
左边是签到
image.png
左边和右边图标
image.png
右边是铅笔图标
image.png

image.png
图标用view组件包裹起来
image.png
中间也用view组件
image.png

  1. <!-- 自定义导航栏 -->
  2.         <uni-nav-bar :statusBar="true" @clickRight="openAdd">
  3.             <!-- 左边 -->
  4.             <block slot="left">
  5.                 <view class="">
  6.                     <view class="icon iconfont icon-qiandao"></view>
  7.                 </view>
  8.             </block>
  9.             <!-- 中间 -->
  10.             <view class=""></view>
  11.             <!-- 右边 -->
  12.             <block slot="right">
  13.                 <view class="">
  14.                     <view class="icon iconfont icon-bianji1"></view>
  15.                 </view>
  16.             </block>
  17.         </uni-nav-bar>

签到图标太小了也太靠边了。 右侧的铅笔图标也位置不对。
image.png

image.png

image.png
加黑色的边框
image.png
image.png

image.png
左边和右边的宽度不一样。
image.png
右边100%，左边加点外边距。
image.png
图标的大小
image.png

  1. <style>
  2.     .nav-left,.nav-right{
  3.         border: 1upx solid;
  4.         width: 100%;
  5.     }
  6.     .nav-left{
  7.         margin-left: 16upx;
  8.     }
  9.     .nav-left>view,.nav-right>view{
  10.         font-size: 32upx;
  11.     }
  12. </style>

image.png
右边的图标需要居中一下
flex布局 上下左右居中。
image.png

  1. u-f-ajc

image.png
图标增大
image.png

image.png
去掉边框
image.png

吸取图标颜色
image.png

image.png

image.png

中间内容

image.png
加个边框
image.png
水平垂直居中
image.png
image.png
边框距离右边和距离左边是有一定的区别的
image.png
需要把中间的边框往左边移一下。负的20就向左边偏移
image.png

image.png
边框去掉
image.png

  1. .nav-tab-bar{
  2.         /* 父节点是flex为1的 所以这里100%宽度就可以继承父元素的宽度 */
  3.         width: 100%;
  4.         border: 1upx solid;
  5.         margin-left: -20upx;
  6.     }

image.png

可以看到字体大小和间距都小了
image.png
字体大小 和 左右的内边距
image.png
差多不了 但是字体有点大。
image.png

image.png

  1. .nav-tab-bar>view{
  2.         border: 1upx solid;
  3.         font-size: 32upx;
  4.         padding: 0 15upx;
  5.     }

image.png
字体加粗
image.png

  1. .nav-tab-bar>view{
  2.         border: 1upx solid;
  3.         font-size: 32upx;
  4.         padding: 0 15upx;
  5.         font-weight: bold;
  6.     }

优化

默认颜色 ，选中颜色， 底部黄线
image.png

image.png

  1. <view class="active">关注</view>

黄色的线，在里面再加一个view
image.png

image.png

  1. <view class="nav-tab-bar u-f-ajc">
  2.                 <view class="active">关注<view class="nav-tab-bar-line"></view></view>
  3.                 <view class="">话题<view class="nav-tab-bar-line"></view></view>
  4. </view>

默认的字体颜色
image.png
选中的的字体颜色
image.png

  1. .active{
  2.         color: #333333!important;
  3.     }

线的样式
image.png

  1. .nav-tab-bar-line{
  2.         border-bottom: 5upx solid red;
  3.         border-top: 5upx solid red;
  4.         width: 70upx;
  5.         border-radius: 20upx;
  6.     }

没见黄线
image.png
使用相对定位。父元素相对定位
image.png

  1. .nav-tab-bar{
  2.         /* 父节点是flex为1的 所以这里100%宽度就可以继承父元素的宽度 */
  3.         width: 100%;
  4.         /* border: 1upx solid; */
  5.         margin-left: -20upx;
  6.         position: relative;
  7.     }

子元素绝对定位。
image.png

image.png
删
image.png
image.png
差不多了 希望再网上一点点。
image.png

image.png

image.png
上下左右 垂直居中。
image.png

image.png
吸取黄色
image.png
去掉外边框。
image.png

  1. .nav-tab-bar-line{
  2.         border-bottom: 14upx solid #FEDE33;
  3.         /* border-top: 7upx solid #FEDE33; */
  4.         width: 70upx;
  5.         border-radius: 20upx;
  6.         position: absolute;
  7.         bottom: 12upx;
  8.     }

image.png

实现功能

image.png

  1. data() {
  2.             return {
  3.                 tabIndex: 0,
  4.                 tabBaras: [
  5.                     {name:'关注',id:'guanzhu'},
  6.                     {name:'话题',id:'toppic'},
  7.                 ]
  8.             }
  9.         },

block，然后v-for循环
image.png

image.png

  1. <view class="nav-tab-bar u-f-ajc">
  2.                 <block v-for="(tab,index) in tabBaras" :key="tab.id">
  3.                     <view class="u-f-ajc" :class="{'active':tabIndex==index}">
  4.                         {{tab.name}}
  5.                         <view v-if="(tabIndex==index)" class="nav-tab-bar-line"></view></view>
  6.                 </block>
  7.             </view>

点击事件

image.png

  1. <view class="u-f-ajc" :class="{'active':tabIndex==index}"
  2.                     @tap="changeTab(index)">

image.png

  1. methods: {
  2.             changeTab(index) {
  3.                 this.tabIndex=index;
  4.             }
  5.         }

tab实现了点击的切换效果
image.png

发布点击事件

复制这段 navigateTo跳转的代码
image.png

  1.     uni.navigateTo({
  2.                     url:'../add-input/add-input'
  3.                 });

增加openAdd方法
image.png

  1. openAdd(){
  2.                 uni.navigateTo({
  3.                     url:'../add-input/add-input'
  4.                 })
  5.             }

image.png

image.png

本节最终代码

  1. <template>
  2.     <view>
  3.         <!-- 自定义导航栏 -->
  4.         <uni-nav-bar :statusBar="true" @clickRight="openAdd">
  5.             <!-- 左边 -->
  6.             <block slot="left">
  7.                 <view class="nav-left">
  8.                     <view class="icon iconfont icon-qiandao"></view>
  9.                 </view>
  10.             </block>
  11.             <!-- 中间 -->
  12.             <view class="nav-tab-bar u-f-ajc">
  13.                 <block v-for="(tab,index) in tabBaras" :key="tab.id">
  14.                     <view class="u-f-ajc" :class="{'active':tabIndex==index}"
  15.                     @tap="changeTab(index)">
  16.                         {{tab.name}}
  17.                         <view v-if="(tabIndex==index)" class="nav-tab-bar-line"></view></view>
  18.                 </block>
  19.             </view>
  20.             <!-- 右边 -->
  21.             <block slot="right">
  22.                 <view class="nav-right u-f-ajc">
  23.                     <view class="icon iconfont icon-bianji1"></view>
  24.                 </view>
  25.             </block>
  26.         </uni-nav-bar>
  28.     </view>
  29. </template>
  31. <script>
  32.     export default {
  33.         data() {
  34.             return {
  35.                 tabIndex: 0,
  36.                 tabBaras: [
  37.                     {name:'关注',id:'guanzhu'},
  38.                     {name:'话题',id:'toppic'},
  39.                 ]
  40.             }
  41.         },
  42.         methods: {
  43.             changeTab(index) {
  44.                 this.tabIndex=index;
  45.             },
  46.             openAdd(){
  47.                 uni.navigateTo({
  48.                     url:'../add-input/add-input'
  49.                 })
  50.             }
  51.         }
  52.     }
  53. </script>
  55. <style>
  56.     /* .nav-left,.nav-right{
  57.         border: 1upx solid;
  58.         width: 100%;
  59.     } */
  60.     .nav-left{
  61.         /* 这里视频中是左边16upx,实际这里是不需要的 */
  62.         margin-left: 0upx;
  63.     }
  64.     .nav-left>view,.nav-right>view{
  65.         font-size: 40upx;
  66.     }
  67.     .nav-left>view{
  68.         color: #FF9619;
  69.     }
  70.     .nav-tab-bar{
  71.         /* 父节点是flex为1的 所以这里100%宽度就可以继承父元素的宽度 */
  72.         width: 100%;
  73.         /* border: 1upx solid; */
  74.         margin-left: -20upx;
  75.         position: relative;
  76.     }
  77.     .nav-tab-bar>view{
  78.         /* border: 1upx solid; */
  79.         font-size: 32upx;
  80.         padding: 0 15upx;
  81.         font-weight: bold;
  82.         color: #969696;
  83.     }
  84.     .active{
  85.         color: #333333!important;
  86.     }
  87.     .nav-tab-bar-line{
  88.         border-bottom: 14upx solid #FEDE33;
  89.         /* border-top: 7upx solid red; */
  90.         width: 70upx;
  91.         border-radius: 20upx;
  92.         position: absolute;
  93.         bottom: 12upx;
  94.     }
  95. </style>

结束