Navbar

顶部导航

顶部 tab，当需要在页面顶部展示 tab 导航时使用，实现这个效果主要有两个地方要注意一下：

  • 顶部点击后有颜色的改变以及有过度效果
  • 顶部点击后下面对应部分也要发生改变

先看在mpvue中实现的示例代码：

  1. <template>
  2.   <div class="page">
  3.     <div class="page__bd">
  4.       <div class="weui-tab">
  5.         <div class="weui-navbar">
  6.           <block v-for="(item,index) in tabs" :key="index">
  7.             <div :id="index" :class="{'weui-bar__item_on':activeIndex == index}" class="weui-navbar__item" @click="tabClick">
  8.               <div class="weui-navbar__title">{{item}}</div>
  9.             </div>
  10.           </block>
  11.           <div class="weui-navbar__slider" :class="navbarSliderClass"></div>
  12.         </div>
  13.         <div class="weui-tab__panel">
  14.           <div class="weui-tab__content" :hidden="activeIndex != 0">选项一的内容</div>
  15.           <div class="weui-tab__content" :hidden="activeIndex != 1">选项二的内容</div>
  16.           <div class="weui-tab__content" :hidden="activeIndex != 2">选项三的内容</div>
  17.         </div>
  18.       </div>
  19.     </div>
  20.   </div>
  21. </template>
  23. <script>
  24. export default {
  25.   data() {
  26.     return {
  27.       tabs: ["选项一", "选项二", "选项三"],
  28.       activeIndex: 0,
  29.       fontSize: 30
  30.     }
  31.   },
  32.   computed: {
  33.     navbarSliderClass() {
  34.       if (this.activeIndex == 0) {
  35.         return 'weui-navbar__slider_0'
  36.       }
  37.       if (this.activeIndex == 1) {
  38.         return 'weui-navbar__slider_1'
  39.       }
  40.       if (this.activeIndex == 2) {
  41.         return 'weui-navbar__slider_2'
  42.       }
  43.     }
  44.   },
  45.   methods: {
  46.     tabClick(e) {
  47.       console.log(e);
  48.       this.activeIndex = e.currentTarget.id;
  49.     }
  50.   }
  51. }
  52. </script>
  54. <style scoped>
  55. page,
  56. .page,
  57. .page__bd {
  58.   height: 100%;
  59. }
  60. .page__bd {
  61.   padding-bottom: 0;
  62. }
  63. .weui-tab__content {
  64.   padding-top: 60px;
  65.   text-align: center;
  66. }
  67. .weui-navbar__slider_0 {
  68.   left: 29rpx;
  69.   transform: translateX(0);
  70. }
  71. .weui-navbar__slider_1 {
  72.   left: 29rpx;
  73.   transform: translateX(250rpx);
  74. }
  75. .weui-navbar__slider_2 {
  76.   left:29rpx;
  77.   transform: translateX(500rpx);
  78. }
  79. </style>

从示例代码中可以看出，每次点击 tab，会触发一个 event事件，从这个事件中，通过 e.currentTarget.id可以获取点击tab上绑定的 id值，再根据:class来判断要不要显示 weui-bar__item_on类。对于下面绿色的滑动条过渡效果是通过 CSS3 属性transform: translateX()来实现，依赖 vue的 computed 属性，通过e.currentTarget.id来判断确定需要translateX的值，从而对应添加相应的类。当tab切换时，下面内容展示区也是根据e.currentTarget.id来控制显示与隐藏。

效果

navbar01