可以直接复制dist中的文件，到你的项目的pages页。如果放到其他的目录，需要相应修改下列引用中的路径( ./path/to/file/tabbar.subfix )
index.wxml (页面的 wxml文件中)
- <!-- 在需要的页面的头部 引入wxml -->
- <import src="../template/tabbar.wxml"/>
- <!-- 直接引入 -->
- <template is="tab-bar" data="{{ jhDataForTabbar }}"/>
- <!--
- 其他的页面的元素
- -->
index.wxss (页面的 wxss 文件)
- /* 引入tabbar的样式 */
- @import "../template/tabbar.wxss";
index.js (页面的 js 文件)文件头部：
- import {
- init, // 初始化组件及页面
- Tabbar, // Tabbar是组件的事件注册中心
- setTabbarData // 设置/更新 tabbar显示的数据
- } from "../template/tabbar";
文件内部：调用init(object)函数，初始化页面
- let UserPageData = {
- data: {
- name: "Jonham.Chen"
- },
- onLoad: function() {
- },
- // ... any others
- };
- init(UserPageData);
文件内部：调用setTabbarData(object)函数，设置及更新tabbar的数据
- const tabbarData = [];
- tabbarData.push({
- iCount: 1, //未读数目
- sIconUrl: 'imageUrl', //按钮图标的url或者 相对路径
- sTitle: "title", //按钮名称
- });
- setTabbarData(tabbarData);
文件内部：调用Tabbar.addListener(fn)函数增加tab的监听事件
- /** Tabbar.addListener( fn ) 增加监听事件
- * .removeListener( fn ) 移除监听事件
- * .removeAll() 移除所有监听事件
- *
- */
- Tabbar.addListener(function(ev) {
- console.log(ev);
- // ev.key === 'note'
- // ev的key对应被点击的tab的title
- });
 |
weapp-component-tabbar-master.zip |
