NVTabBar模块（底部导航）demo分享

uoaccw

NVTabBar 是一个底部导航条模块，该模块依附于当前主 window 。开发者可通过相应接口参数自定义其样式，设置、取消选中状态，动态配置 item 的徽章（badge）等功能。
  

模块文档地址

下面是一个NVTabBar 切换frame的简单用法，和大家分享。

  附件有图片资源。

1. function NVTabBar_open() {
   
2.                 var NVTabBar = api.require('NVTabBar');
   
3.                 alert(NVTabBar)
   
4.                 NVTabBar.open({
   
5.                         styles: {
   
6.                                 bg: 'rgba(200,200,200,1)',
   
7.                                 h: 54,
   
8.                                 dividingLine: {
   
9.                                         width: 0,
   
10.                                         color: '#000'
    
11.                                 },
    
12.                                 badge: {
    
13.                                         bgColor: '#f00',
    
14.                                         numColor: '#000',
    
15.                                         size: 6.0,
    
16.                                         centerY: 2
    
17.                                 }
    
18.                         },
    
19.                         items: [{
    
20.                                 w: api.winWidth / 5.0,
    
21.                                 iconRect: {
    
22.                                         w: 25.0,
    
23.                                         h: 25.0,
    
24.                                 },
    
25.                                 icon: {
    
26.                                         normal: 'widget://image/nvtabbar/acti.png',
    
27.                                         highlight: 'widget://image/nvtabbar/actied.png',
    
28.                                         selected: 'widget://image/nvtabbar/actied.png'
    
29.                                 },
    
30.                                 title: {
    
31.                                         text: '动态',
    
32.                                         size: 12.0,
    
33.                                         normal: '#696969',
    
34.                                         selected: '#eb4f38',
    
35.                                         marginB: 6.0
    
36.                                 }
    
37.                         }, {
    
38.                                 w: api.winWidth / 5.0,
    
39.                                 iconRect: {
    
40.                                         w: 25.0,
    
41.                                         h: 25.0,
    
42.                                 },
    
43.                                 icon: {
    
44.                                         normal: 'widget://image/nvtabbar/guan.png',
    
45.                                         highlight: 'widget://image/nvtabbar/guaned.png',
    
46.                                         selected: 'widget://image/nvtabbar/guaned.png'
    
47.                                 },
    
48.                                 title: {
    
49.                                         text: '发现',
    
50.                                         size: 12.0,
    
51.                                         normal: '#696969',
    
52.                                         selected: '#eb4f38',
    
53.                                         marginB: 6.0
    
54.                                 }
    
55.                         }, {
    
56.                                 w: api.winWidth / 5.0,
    
57.                                 bg: {
    
58.                                         marginB: 0,
    
59.                                         image: 'rgba(200,200,200,0)'
    
60.                                 },
    
61.                                 iconRect: {
    
62.                                         w: 50,
    
63.                                         h: 50,
    
64.                                 },
    
65.                                 icon: {
    
66.                                         normal: 'widget://image/nvtabbar/yyuan.png',
    
67.                                         highlight: 'widget://image/nvtabbar/mai.png',
    
68.                                         selected: 'widget://image/nvtabbar/mai.png'
    
69.                                 }
    
70.                         }, {
    
71.                                 w: api.winWidth / 5.0,
    
72.                                 iconRect: {
    
73.                                         w: 25.0,
    
74.                                         h: 25.0,
    
75.                                 },
    
76.                                 icon: {
    
77.                                         normal: 'widget://image/nvtabbar/bir.png',
    
78.                                         highlight: 'widget://image/nvtabbar/bired.png',
    
79.                                         selected: 'widget://image/nvtabbar/bired.png'
    
80.                                 },
    
81.                                 title: {
    
82.                                         text: '消息',
    
83.                                         size: 12.0,
    
84.                                         normal: '#696969',
    
85.                                         selected: '#eb4f38',
    
86.                                         marginB: 6.0
    
87.                                 }
    
88.                         }, {
    
89.                                 w: api.winWidth / 5.0,
    
90.                                 iconRect: {
    
91.                                         w: 25.0,
    
92.                                         h: 25.0,
    
93.                                 },
    
94.                                 icon: {
    
95.                                         normal: 'widget://image/nvtabbar/fav.png',
    
96.                                         highlight: 'widget://image/nvtabbar/faved.png',
    
97.                                         selected: 'widget://image/nvtabbar/faved.png'
    
98.                                 },
    
99.                                 title: {
    
100.                                         text: '我的',
     
101.                                         size: 12.0,
     
102.                                         normal: '#696969',
     
103.                                         selected: '#eb4f38',
     
104.                                         marginB: 6.0
     
105.                                 }
     
106.                         }],
     
107.                         selectedIndex: 0
     
108.                 }, function(ret, err) {
     
109.                         if (ret) {
     
110. 
     
111.                                 if (ret.eventType == "click" && ret.index == 0) {
     
112.                                         api.openFrame({
     
113.                                                 name: 'kong',
     
114.                                                 url: '../html/fame1.html',
     
115.                                                 rect: {
     
116.                                                         x: 0,
     
117.                                                         y: 70,
     
118.                                                         h: 200
     
119.                                                 }
     
120.                                         });
     
121.                                 }
     
122.                                 if (ret.eventType == "click" && ret.index == 1) {
     
123.                                         api.openFrame({
     
124.                                                 name: 'kong2',
     
125.                                                 url: 'fame2.html',
     
126.                                                 rect: {
     
127.                                                         x: 0,
     
128.                                                         y: 70,
     
129.                                                         h: 200
     
130.                                                 }
     
131.                                         });
     
132.                                 }
     
133.                                 var NVTabBar = api.require('NVTabBar');
     
134.                                 NVTabBar.setBadge({
     
135.                                         index: 4,
     
136.                                         badge: ''
     
137.                                 });
     
138.                         }
     
139.                 });
     
140.         }

复制代码

uoaccw

gigie

uoaccw 发表于 2017-12-18 17:33

赞一个，感谢分享。

zhangchunyu521

赞一个，感谢分享。

技术支持-F

Fufure

谢谢楼猪分享

啊霜霜

感谢分享

yaonie_1806

我这里设置的点是黄色的为啥呢

danier

谢谢分享，学习拿金币

bdpqbd

回帖拿金币，支持支持