微信小程序自定义组件:带未读数目的tab按钮
可以直接复制dist中的文件,到你的项目的pages页。如果放到其他的目录,需要相应修改下列引用中的路径( ./path/to/file/tabbar.subfix )
<!-- 在需要的页面的头部 引入wxml -->
<import src="../../components/template/tabbar.wxml"/>
<!-- 直接引入 -->
<template is="tab-bar" data="{{ jhDataForTabbar }}"/>
<!--
其他的页面的元素
-->
/* 引入tabbar的样式 */
@import "../../components/template/tabbar.wxss";
import {
init, // 初始化组件及页面
Tabbar, // Tabbar是组件的事件注册中心
setTabbarData // 设置/更新 tabbar显示的数据
} from "../../components/template/tabbar";
let UserPageData = {
data: {
name: "Jonham.Chen"
},
onLoad: function() {
},
// ... any others
};
init(UserPageData);
const tabbarData = [];
tabbarData.push({
iCount: 1, //未读数目
sIconUrl: 'imageUrl', //按钮图标的url或者 相对路径
sTitle: "title", //按钮名称
});
setTabbarData(tabbarData);
/** Tabbar.addListener( fn ) 增加监听事件
* .removeListener( fn ) 移除监听事件
* .removeAll() 移除所有监听事件
*
*/
Tabbar.addListener(function(ev) {
console.log(ev);
// ev.key === 'note'
// ev的key对应被点击的tab的title
});
PS: 当然,可以通过 git clone https://github.com/Jonham/weapp-component-tabbar.git
命令,直接用 微信开发者工具 打开目录即可预览。
使用中,有任何问题、建议,请在issue页提交。或者联系我[ me@jonham.cn ]