Navbar

顶部导航

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

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

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

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

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

效果

navbar01