小程序导航栏TabBar设置注意事项

首页小程序导航栏TabBar设置

1、注意区分属性值大小写的区别，比如selectedIconPath如果写成selectediconpath则不显示。

2、如果tabBar中设置"postion":"top"则icopath的都不再显示。

3、注意{}中如果列出几项，这除最后一项外每一项结尾加逗号，最后一项不用加。

"tabBar": {

    "selectedColor": "#1296db",

    "list": [{

      "pagePath": "pages/index/index",

      "text": "首页",

      "iconPath": "images/ico-homepng",

      "selectedIconPath": "images/ico-home-dpng"

    },{

      "pagePath": "pages/setting/setting",

      "text": "设置",

      "iconPath": "images/ico-settingpng",

      "selectedIconPath": "images/ico-setting-dpng"

    },{

      "pagePath": "pages/help/help",

      "text": "帮助",

      "iconPath": "images/ico-helppng",

      "selectedIconPath": "images/ico-help-dpng"

    }]

  }

虽然在appjson里面设置tabBar很方便。但是也有弊端。如果是每个页面都需要有这个tabBar的话，显然用原生的就不能满足这个需求了。因此我们需要第二种方案。

此处我是放在了components文件夹里面，后期有公用的组件都可以放在里面

由于用了组件库，所以此处要同时引入组件库的样式

此时，哪个页面要用 就直接执行最后一步使用组件库就好了。

微信小程序自定义组件：带未读数目的tab按钮

组件的使用

可以直接复制dist中的文件，到你的项目的pages页。如果放到其他的目录，需要相应修改下列引用中的路径( /path/to/file/tabbarsubfix )

indexwxml (页面的 wxml文件中)[mw_shl_code=applescript,true]<!-- 在需要的页面的头部 引入wxml -->

<import src="/template/tabbarwxml"/>

<!-- 直接引入 -->

<template is="tab-bar" data="{{ jhDataForTabbar }}"/>

<!--

其他的页面的元素

-->[/mw_shl_code]

#### indexwxss (页面的 wxss 文件)

[mw_shl_code=applescript,true] / 引入tabbar的样式 /

@import "/template/tabbarwxss";[/mw_shl_code]

indexjs (页面的 js 文件)文件头部：[mw_shl_code=applescript,true]import {

init, // 初始化组件及页面

Tabbar, // Tabbar是组件的事件注册中心

setTabbarData // 设置/更新 tabbar显示的数据

} from "/template/tabbar";[/mw_shl_code]文件内部：调用init(object)函数，初始化页面[mw_shl_code=applescript,true]let UserPageData = {

data: {

name: "JonhamChen"

},

onLoad: function() {

},

// any others

};

init(UserPageData);[/mw_shl_code]文件内部：调用

});

setTabbarData(tabbarData);[/mw_shl_code]文件内部：调用TabbaraddListener(fn)函数增加tab的监听事件[

以上就是关于小程序导航栏TabBar设置注意事项全部的内容，包括:小程序导航栏TabBar设置注意事项、小程序系列之tabBar、小程序tabBar 小红点 原生怎么实现等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！