微信小程序底部导航栏实现

1 {

2 "":[

3 "//",

4 "//",

5 "//"

6

7 ],

8 "":{

9 "":"",

10 "": "#",

11 "": "首页",

12 "":""

13 },

14

15 "": {

16 "": "#977",

17 "": "#116",

18 "": "" ,

19 "": [{

20 "": "/__.",

21 "": "/_.",

22 "": "//",

23 "": "首页"

24 }, {

25 "": "/__.",

26 "": "/_.",

27 "": "//",

28 "": "一元投"

29 },{

30 "": "/__.",

31 "": "/_.",

32 "": "//",

33 "": "我的"

34 }

35 ]

36 }

37 }

这里我先解释一下这些属性是什么意思：

指底部的 导航配置属性

未选择时 底部导航文字的颜色

选择时 底部导航文字的颜色

底部导航边框的样色（注意 这里如果没有写入样式 会导致 导航框上边框会出现默认的浅灰色线条）

导航配置数组

选中时 图标路径

未选择时 图标路径

页面访问地址

导航图标下方文字

这里需要注意一些小问题：

1、每个页面的文件都不能去掉这个属性。否则会报错

2、

"":[

3 "//",

4 "//",

5 "//"

6

7 ],

这个页面的注册一定要注意，第一个一定是要是最先显示的，否则会出现底部导航看不到。