NVTabBar的bug

汪阿浠

NVTabBar模块的问题，备注：直接采用文档里的代码！！！！！！！！！！！！！！！
1.图标高度不一致，建议设置图标距离模块上边缘的距离。（marginB: 6.0           //（可选项）数字类型；子项标题距离模块下边缘的距离；默认：6.0）
2.中间圆形图片，变成了椭圆形。
3.模块高度，实例代码设置了h=65.这样的高度会感觉太高了，一般都是50-55这样把。（h: 50 ,             //（可选项）数字类型；模块的高度（含分割线）；默认：50）
4.中间圆形图片，边缘虚化很严重。图片本身正常的~！
图片演示：

ios

ios

安卓

安卓

调用的实例代码

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

复制代码

munyi

中间那个图建议你重新做下，配合下这个模块

汪阿浠

munyi 发表于 2017-9-25 10:48
中间那个图建议你重新做下，配合下这个模块

默认就是圆形的  还要则么配合？

munyi

汪阿浠 发表于 2017-9-25 10:53
默认就是圆形的  还要则么配合？

一看你的这上图片做得不好，不太配 这个效果，把这个圆形做大一点

汪阿浠

唉~~~~~~~~~~

技术咨询-F

汪阿浠 发表于 2017-9-25 11:18
唉~~~~~~~~~~

  iconRect: {
            w: 32,
            h: 32,
        },
你把这个w,h调大一些看看，你的手机屏幕多少寸的

汪阿浠

技术支持-F 发表于 2017-9-25 17:49
iconRect: {
            w: 32,
            h: 32,

4寸 5寸 5.7寸 6寸 都测试了~ 这个应该不是大小的问题~！ 应该是获取的边距问题~！

技术咨询-F

汪阿浠 发表于 2017-9-26 15:31
4寸 5寸 5.7寸 6寸 都测试了~ 这个应该不是大小的问题~！ 应该是获取的边距问题~！ ...

我反馈一下，看看能不能优化。

汪阿浠

技术支持-F 发表于 2017-9-27 20:55
我反馈一下，看看能不能优化。

3Q

技术咨询-F

汪阿浠 发表于 2017-9-28 08:40
3Q

已优化。