TabBar 标签栏

基本用法

  1. <nut-tabbar
  2. @tab-switch="tabSwitch1"
  3. type="card"
  4. :tabbar-list="tabList1"
  5. ></nut-tabbar>
  1. export default {
  2. data() {
  3. return {
  4. tabList1:[
  5. {
  6. 'tabTitle':'日用品',
  7. 'curr':true,
  8. 'icon':'http://img13.360buyimg.com/uba/jfs/t30331/209/562746340/2190/6619973d/5bf763aaN6ff02099.jpg',
  9. 'activeIcon':'http://img20.360buyimg.com/uba/jfs/t28675/125/569589124/2710/fe1b0e7c/5bf79218Nbc49fc24.jpg'
  10. },
  11. {
  12. 'tabTitle':'服饰',
  13. 'curr':false,
  14. 'icon':'http://img13.360buyimg.com/uba/jfs/t27280/289/2061314663/2392/872e32ff/5bf76318Ndc80c1d8.jpg',
  15. 'activeIcon':'http://img14.360buyimg.com/uba/jfs/t28468/128/565494642/3313/ce508dd6/5bf79214Nab2a3076.jpg'
  16. },
  17. {
  18. 'tabTitle':'娱乐',
  19. 'curr':false,
  20. 'icon':'http://img10.360buyimg.com/uba/jfs/t26779/215/2118525153/2413/470d1613/5bf767b2N075957b7.jpg',
  21. 'activeIcon':'http://img11.360buyimg.com/uba/jfs/t27370/260/2117900302/3274/bd097e85/5bf7921bNafc526e2.jpg'
  22. }
  23. ]
  24. };
  25. },
  26. methods: {
  27. tabSwitch1:function(value,index){
  28. console.log(index);
  29. },
  30. }

带有tips的文本标签栏

  1. <nut-tabbar
  2. @tab-switch="tabSwitch2"
  3. type="card"
  4. :tabbar-list="tabList2"
  5. >
  6. </nut-tabbar>
  1. export default {
  2. data() {
  3. return {
  4. tabList2:[
  5. {
  6. 'tabTitle':'百度',
  7. 'curr':false,
  8. 'icon':'',
  9. 'num':13,
  10. },
  11. {
  12. 'tabTitle':'京东',
  13. 'curr':true,
  14. 'icon':''
  15. },
  16. {
  17. 'tabTitle':'知乎',
  18. 'curr':false,
  19. 'icon':'',
  20. }
  21. ]
  22. };
  23. },
  24. methods: {
  25. tabSwitch2:function(value,index){
  26. console.log(value);
  27. }
  28. }
  29. };

固定底部,可跳转页面

  1. <nut-tabbar
  2. @tab-switch="tabSwitch3"
  3. :tabbar-list="tabList3"
  4. :bottom="true"
  5. >
  6. </nut-tabbar>
  1. export default {
  2. components: {
  3. [tabbar.name]: tabbar,
  4. },
  5. data() {
  6. return {
  7. tabList3:[
  8. {
  9. 'tabTitle':'主页',
  10. 'curr':true,
  11. 'icon':'http://img13.360buyimg.com/uba/jfs/t1/29316/38/1115/3203/5c0f3d61E35d0c7da/9e557f2cb5c9dab6.jpg',
  12. 'activeIcon':'http://img20.360buyimg.com/uba/jfs/t1/9996/36/8646/4833/5c0f3d61E7c1b7e0f/c98ad61124172e93.jpg',
  13. 'href':'###'
  14. },
  15. {
  16. 'tabTitle':'分类',
  17. 'curr':false,
  18. 'icon':'http://img12.360buyimg.com/uba/jfs/t1/25443/23/1062/4600/5c0f3d61E2e9f1360/c9b3421fe18614e2.jpg',
  19. 'activeIcon':'http://img20.360buyimg.com/uba/jfs/t1/19241/12/1048/8309/5c0f3d61E17ed5a56/c3af0964cade47f8.jpg',
  20. 'href':'###'
  21. },
  22. {
  23. 'tabTitle':'发现',
  24. 'curr':false,
  25. 'icon':'http://img13.360buyimg.com/uba/jfs/t1/10361/35/4713/4643/5c0f3d62E437a3c94/273fd0fb90798f03.jpg',
  26. 'activeIcon':'http://img14.360buyimg.com/uba/jfs/t1/26604/35/1073/7896/5c0f3d61Eb9f5f184/5f01c938abe4216d.jpg',
  27. 'href':'###'
  28. },
  29. {
  30. 'tabTitle':'购物车',
  31. 'curr':false,
  32. 'num':2,
  33. 'icon':'http://img11.360buyimg.com/uba/jfs/t1/14848/18/1066/3723/5c0f41bdE9f2a38fe/e6ed6768717297fb.jpg',
  34. 'activeIcon':'http://img30.360buyimg.com/uba/jfs/t1/17538/16/1070/6214/5c0f41bdE4bc9a1db/74cf978e5015454b.jpg',
  35. 'href':'###'
  36. },
  37. {
  38. 'tabTitle':'我的',
  39. 'curr':false,
  40. 'icon':'http://img20.360buyimg.com/uba/jfs/t1/20004/20/1045/3620/5c0f3d61Eaaec1670/9e59db63983b7b9f.jpg',
  41. 'activeIcon':'http://img14.360buyimg.com/uba/jfs/t1/23967/14/1072/6714/5c0f3d61E0ad8991e/8f741953f6e38f15.jpg',
  42. 'href':'###'
  43. }
  44. ]
  45. };
  46. },
  47. methods: {
  48. tabSwitch3:function(value,index){
  49. console.log(index);
  50. }
  51. }
  52. };

Prop

nut-tabbar

字段说明类型默认值
type页签栏的样式 based/card:based是默认样式如吸底样式,card类型每个卡片间有边界线Stringbased
tabbar-list渲染数据 ,兼容 tabbar-list 和 tabbarListArray[]
bottom是否固定在页面底部Booblefalse
replacereplace为true的时候,跳转url以替换的形式进行Booleanfalse

tabbar-list

字段说明类型默认值
tabTitle标签页的标题String
curr是否为选中的标签页Booblefalse
icon标签页显示的图片String
activeIcon标签页的活动状态显示的图片String
href标签页的跳转链接String
num页签右上角的数字角标,超出99之后为省略号Number

Event

事件名称说明回调参数
tabSwitch切换页签时触发事件点击的索引值和对应的数据

TabBar 标签栏 - 图1