微信小程序可以在 app.json 中配置默认的 tabBar,然而自带的 tabBar 只能实现页面间的跳转,无法实现譬如拨打电话等操作。
组件化 tabbar 顾名思义就是以组件化的方式将 tabbar 引入页面。
首先,新建微信小程序四个基本文件 tabBar.wxml tabBar.wxss tabBar.js tabBar.json 放入自定义的一个文件夹内,可以命名为 components。
tabBar.wxml 内容如下:
{{item.text}}
tabBar.wxss 内容如下:
.icon{ display: block; padding-top: 12rpx; margin: 0 auto; width:34rpx; height: 30rpx; } .tabBar{ width:100%; position: fixed; bottom:0; background:#fff; font-size:24rpx; color:#7c7c7c; border-top: 1rpx solid #e3e3e3; overflow: hidden; line-height: 47rpx; z-index: 10; } .tabBar-item{ float:left; width:25%; text-align: center; overflow: hidden; } /*当前字体颜色*/ .tabBartext{ color: #232323; } .footerbh { width: 100%; height: 90rpx; }
tabBar.js 内容如下:
function tabBarInit() { return [{ "active":0, "page_path": "/pages/index/index", "icon_path": "/images/tab_icon1.png", "active_icon_path": "/images/tab_icon1_hover.png", "text": "首页" },{ "active": 0, "page_path": "/pages/classify/classify", "icon_path": "/images/tab_icon2.png", "active_icon_path": "/images/tab_icon2_hover.png", "text": "分类" },{ "active": 0, "page_path": "/pages/cart/cart", "icon_path": "/images/tab_icon3.png", "active_icon_path": "/images/tab_icon3_hover.png", "text": "购物车" },{ "active": 0, "page_path": "/pages/me/me", "icon_path": "/images/tab_icon4.png", "active_icon_path": "/images/tab_icon4_hover.png", "text": "我的" } ] } function tabBarMain(bindName = "tabdata", id, target) { var that = target; var bindData = {}; var otabbar = tabBarInit(); otabbar[id]['icon_path'] = otabbar[id]['active_icon_path']//换当前的icon otabbar[id]['active'] = 1; bindData[bindName] = otabbar that.setData({ bindData }); } module.exports = { tabbar: tabBarMain }
tabBar.json 内容如下:
{ "component": true, "usingComponents": {} }
然后在需要显示 tabBar 的页面比如首页 index.wxml 中加入:
记得在页面最下方加入一个占位元素,不然会被 tabBar 组件覆盖。
在 index.js 中加入:
const app = getApp() var template = require('../components/tabBar.js'); Page({ data: {}, onLoad: function (options) { console.log(app.globalData.userInfo) var that = this template.tabbar("tabBar", 0, this);//0表示第一个tabbar } })
0 表示第一个 tabBar,1 表示第二个 tabBar,以此类推。