Jonham / Weapp Component Tabbar
Licence: mit
微信小程序自定义组件:带未读数目的tab按钮
Stars: ✭ 56
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Weapp Component Tabbar
Cyltabbarcontroller
[EN]It is an iOS UI module library for adding animation to iOS tabbar items and icons with Lottie, and adding a bigger center UITabBar Item. [CN]【中国特色 TabBar】一行代码实现 Lottie 动画TabBar,支持中间带+号的TabBar样式,自带红点角标,支持动态刷新。【iOS13 & Dark Mode & iPhone XS MAX supported】
Stars: ✭ 6,605 (+11694.64%)
Mutual labels: tabbar
Swipeabletabbarcontroller
UITabBarController with swipe interaction between its tabs.
Stars: ✭ 919 (+1541.07%)
Mutual labels: tabbar
React Native Animated Tabbar
A 60FPS animated tab bar with a variety of cool animation presets 😎
Stars: ✭ 890 (+1489.29%)
Mutual labels: tabbar
Xiaochengxu demos
小程序优秀项目源码汇总,每个项目都有图有源码,零基础学微信小程序,小程序表格,小程序视频,小程序视频弹幕,小程序仿天猫大转盘抽奖等源码,小程序云开发,小程序发邮件,小程序支付,微信支付,持续更新。。。
Stars: ✭ 855 (+1426.79%)
Mutual labels: weapp
Taro Music
🎉基于taro + taro-ui + redux + react-hooks + typescript 开发的网易云音乐小程序,目前正在使用react-hooks重构中(不定时更新)
Stars: ✭ 826 (+1375%)
Mutual labels: weapp
Alaweb
一套 Vue 代码,多端可用(H5、小程序、苹果App、安卓App、头条等)。系统含150+页面,200+组件(5端通用),30+元件(每个终端独立完成)
Stars: ✭ 837 (+1394.64%)
Mutual labels: weapp
Nideshop Mini Program
NideShop:基于Node.js+MySQL开发的开源微信小程序商城(微信小程序)
Stars: ✭ 7,115 (+12605.36%)
Mutual labels: weapp
Awesome Mpvue
A curated list of awesome things related to mpvue
Stars: ✭ 1,030 (+1739.29%)
Mutual labels: weapp
Transitionabletab
TransitionableTab makes it easy to animate when switching between tab.
Stars: ✭ 740 (+1221.43%)
Mutual labels: tabbar
Tap water
【声明:未发布前,勿使用,勿star,预计2020年11月底发布】Flutter tab_bar组件,支持中间带加号按钮的TabBar,支持Lottie动画。iTeaTime(技术清谈)团队出品。Highly customizable tabBar and tabBarController for Flutter
Stars: ✭ 52 (-7.14%)
Mutual labels: tabbar
weapp-component-tabbar
微信小程序自定义组件:带未读数目的tab按钮
组件的使用
可以直接复制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
});
PS: 当然,可以通过 git clone https://github.com/Jonham/weapp-component-tabbar.git
命令,直接用 微信开发者工具 打开目录即可预览。
使用中,有任何问题、建议,请在issue页提交。或者联系我[ [email protected] ]
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].