失眠网 > 微信小程序自定义tabbar 图标凸出效果

微信小程序自定义tabbar 图标凸出效果

时间：2019-04-03 07:40:52

小程序自定义底部 tabbar 凸起

底部导航栏这个功能是非常常见的一个功能，基本上一个完成的app，都会存在一个导航栏，那么微信小程序的导航栏该怎么实现呢

自定义tabbar

新建custom-tab-bar文件夹生成page

index.js

// custom-tab-bar/index.jsComponent({/*** 组件的初始数据*/data: {selected: 0, // 当前选中的下标color: '#1e1e1e', // tabbar 未选中字体的颜色selectedColor: "", // tabbar 选中字体的颜色list: [ // tababr 循环数据集{"pagePath": "pages/TerminalInfo/Terminal","iconPath": "/image/icon_API.png","selectedIconPath": "/image/icon_API_HL.png","text": "终端设备"},{// 扫码是我要凸出的tab"pagePath": "pages/ScanCodes/ScanCodes","iconPath": "/image/icon_component.png","selectedIconPath": "/image/icon_component_HL.png","text": "终端扫码","isSpecial": true},{"pagePath": "pages/UserCenter/UserCenter","iconPath": "/image/132.jpg","selectedIconPath": "/image/132.jpg","text": "个人中心"}]},attached() {},methods: {switchTab(e) {let data = e.currentTarget.dataset;/*** 跳转页面为例* let url = data.path;* this.setData({*selected: data.index* })* // 跳转到 tabbar 页，关闭其他所有非 tabbar 页* wx.switchTab({ url });* * 下面是不需要跳转页面为例*/if (!data.click) {let url = data.path;this.setData({selected: data.index})// 跳转到 tabbar 页，关闭其他所有非 tabbar 页wx.switchTab({url });} else {// 扫码凸起wx.scanCode({onlyFromCamera: true,success(res) {console.log(res)},fail(err) {console.log(err)wx.showToast({title: '扫码失败',icon: 'loading',duration: 1500})}})}}}})

index.json

{"component": true,"usingComponents": {}}

index.wxml

index.wxss

.tab-bar {position: fixed;bottom: 0;left: 0;right: 0;height: 96rpx;background: white;display: flex;padding-bottom: env(safe-area-inset-bottom);}.tab-bar-border {background-color: rgba(0, 0, 0, 0.33);position: absolute;left: 0;top: 0;width: 100%;height: 2rpx;transform: scaleY(0.5);}.tab-bar-item {flex: 1;text-align: center;display: flex;justify-content: center;align-items: center;flex-direction: column;}.tab-bar-item .item-image {width: 36rpx;height: 36rpx;}.tab-bar-item .special-image {position: absolute;top: -36rpx;width: 96rpx;height: 96rpx;border-radius: 50%;border-top: 2rpx solid #f2f2f3;background-color: #fff;text-align: center;box-sizing: border-box;padding: 6rpx;}.tab-bar-item .special-image .special-image-pic {width: 100%;height: 100%;}.tab-bar-item .tab-text {margin-top: 4rpx;font-weight: 600;}.tab-bar-item .special-text {margin-top: 44rpx}.tab-bar-item .tab-text {font-size: 10px;}

使用方法

app.json

"tabBar": {"custom": true,"color": "#000","selectedColor": "blue","backgroundColor": "#fff","borderStyle": "black","list": [{"pagePath": "pages/TerminalInfo/Terminal","iconPath": "/image/icon_API.png","selectedIconPath": "/image/icon_API_HL.png","text": "终端设备"},{"pagePath": "pages/ScanCodes/ScanCodes","iconPath": "/image/icon_component.png","selectedIconPath": "/image/icon_component_HL.png","text": "终端扫码"},{"pagePath": "pages/UserCenter/UserCenter","iconPath": "/image/132.jpg","selectedIconPath": "/image/132.jpg","text": "个人中心"}]}

app.js

// 设置tabbar的选中，添加一个全局方法getCurrentTabbar(selected, that) {console.log(selected, that);if (typeof that.getTabBar === 'function' && that.getTabBar()) {that.getTabBar().setData({selected: selected})}}

调用方法：