微信小程序自定义tabbar导航栏，中间凸出样式

这种样式的底部导航栏

使用微信小程序的自定义tabBar：微信小程序官方说明

uni.app=>在 page.json 中的 tabBar 项指定 custom 字段为true：

 "tabBar": {"custom": true,"color": "rgb(51, 51, 51)","selectedColor": "rgb(249, 48, 43)","backgroundColor": "rgb(196, 196, 196)","list": [{"pagePath": "pages/index/index","text": "首页","iconPath": "/static/tabBar/taber_pictrue/home.png","selectedIconPath": "/static/tabBar/taber_pictrue_selected/home.png"}, {"pagePath": "pages/course/index","text": "课程","iconPath": "/static/tabBar/taber_pictrue/course.png","selectedIconPath": "/static/tabBar/taber_pictrue_selected/course.png"}, {"pagePath": "pages/bm/index","text": "报名","iconPath": "/static/tabBar/taber_pictrue/bm.png","selectedIconPath": "/static/tabBar/taber_pictrue_selected/bm.png"}, {"pagePath": "pages/data/index","text": "资料","iconPath": "/static/tabBar/taber_pictrue/data.png","selectedIconPath": "/static/tabBar/taber_pictrue_selected/data.png"}, {"pagePath": "pages/myCenter/index","text": "我的","iconPath": "/static/tabBar/taber_pictrue/mycenter.png","selectedIconPath": "/static/tabBar/taber_pictrue_selected/mycenter.png"}]},

在根目录创建custom-tab-bar目录，注意一定要完全匹配，不要输错：

custom-tab-bar/index.js
custom-tab-bar/index.json
custom-tab-bar/index.wxml
custom-tab-bar/index.wxss

index.js代码：注意这里的中间需要凸出项设置一个class

Component({data: {selected: 0, //当前选中的tab下标color: "#1E1E1E",selectedColor: "#646464", //tabbar选中字体颜色"list": [{"pagePath": "pages/index/index","text": "首页","iconPath": "/static/tabBar/taber_pictrue/home.png","selectedIconPath": "/static/tabBar/taber_pictrue_selected/home.png"}, {"pagePath": "pages/course/index","text": "课程","iconPath": "/static/tabBar/taber_pictrue/course.png","selectedIconPath": "/static/tabBar/taber_pictrue_selected/course.png"}, {"pagePath": "pages/bm/index","text": "报名","iconPath": "/static/tabBar/taber_pictrue/bm-2.png","selectedIconPath": "/static/tabBar/taber_pictrue_selected/bm.png",bmClass: "bm"}, {"pagePath": "pages/data/index","text": "资料","iconPath": "/static/tabBar/taber_pictrue/data.png","selectedIconPath": "/static/tabBar/taber_pictrue_selected/data.png"}, {"pagePath": "pages/myCenter/index","text": "我的","iconPath": "/static/tabBar/taber_pictrue/mycenter.png","selectedIconPath": "/static/tabBar/taber_pictrue_selected/mycenter.png"}]},attached() {},methods: {toggleTabbar(e) {const data = e.currentTarget.dataset;const url ='/' + data.path// this.setData({//  selected: data.index// })wx.switchTab({url})}},
})

index.json代码：

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

index.wxml代码：动态设置中间凸出项的class，css样式可根据自己项目要求进行更改：

<view><view  class="tab-bar" ><image class="tab-bar-bg" src="../static/tabBar/taber_pictrue/tabbar.png"></image><view class="tab-bar-icon tab-bar"><view wx:for="{{list}}" wx:key="index" class="tab-bar-item {{item.diyClass}}" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="toggleTabbar"><image src="{{selected === index ? item.selectedIconPath : item.iconPath}}" class="{{item.bmClass}}"  mode="aspectFit"/><view style="color: {{selected === index ? selectedColor : color}}" class="{{item.bmClass}}">{{item.text}}</view></view></view></view></view>

index.wxss代码：

/*重新样式*/
.tab-bar {position: fixed;bottom: 0;left: 0;right: 0;display: flex;box-sizing: content-box;background-color: transparent;
}.tab-bar-bg {width: 100%;height: 140rpx;}.tab-bar-icon {display: flex;position: absolute;justify-content: space-between;width: 100%;
}.tab-bar-border {background-color: rgba(0, 0, 0, 0.33);position: absolute;left: 0;top: 0;width: 100%;height: 1px;transform: scaleY(0.5);
}.tab-bar-item {flex: auto;text-align: center;display: flex;justify-content: center;align-items: center;flex-direction: column;background-color: transparent;height: 120rpx;
}.tab-bar-item.bm {margin-top: 0 !important;background: transparent;position: relative;flex: inherit;width: 134rpx;
}.tab-bar-item image {width: 48rpx;height: 48rpx;overflow: initial;
}.tab-bar-item view {font-size: 24rpx;
}.tab-bar-item image.bm {position: absolute;width: 108rpx;height: 106rpx;bottom: 80%;z-index: 100;
}.tab-bar-item view.bm {background: transparent;width: 100%;height: 100%;padding-top: 73rpx;z-index: 99;
}

有用可以点赞收藏，嘿嘿~

微信小程序自定义tabbar导航栏，中间凸出样式相关推荐

（转载）微信小程序自定义头部导航栏
本文转载自微信小程序自定义头部导航栏微信小程序自定义头部导航栏先看下demo的效果: 最终要实现的效果: 在tabbar页面不显示左侧按钮: 分享出去的页面进入后不显示左侧返回按钮: 点击返回按钮 ...
微信小程序自定义顶部导航栏标题 navigationStyle
微信小程序自定义顶部导航栏标题单页面自定义导航栏修改需要自定义的页面,的页面配置.json文件全部页面自定义导航修改公共页面配置app.json 单页面自定义导航栏修改需要自定义的页面,的 ...
原声微信小程序自定义顶部导航栏 . 自定义navigationBar。 (单页面设置)
本文实例为大家分享了微信小程序自定义导航栏的具体代码,供大家参考,具体内容如下实现自定义大致需要以下?步骤: 1.在页面.JSON文件进行相关配置,以便去掉原生 "navigationSt ...
微信小程序自定义搜索导航栏
自定义微信小程序导航栏因为项目需要,要实现如京东小程序类似的搜索导航栏-下图所示搜索框在导航栏中.参考了官方API最终实现了该有的效果,顺便吧此次实现的思路和代码记录下来. 一.拆解分析按照正常的 ...
uniapp开发微信小程序自定义顶部导航栏
自定义导航栏渐变色,先上效果使用uniapp开发小程序,在不同界面,要去对页面进行修改顶部导航栏. 比如说要去定义导航栏的背景颜色,常规的去定义导航栏背景颜色全局定义导航栏 "windo ...
微信小程序自定义navigation-bar导航栏(自适应安卓苹果)
最近在写商城,中途遇到了需要自定义修改导航栏的操作,大概是如下图接过样子的,于是想手写一份,但我发现右上角的分享按钮在不同设备离顶部的距离是不一样的,于是找了下官方划水员写的文档(点这里查看),(⊙o ...
html导航栏代码跳转,微信小程序自定义底部导航栏tabBar（含跳转页面wx.navigateTo）...
一.app.json配置这里配置 {"pages": ["pages/usersLists/usersLists","pages/addMember ...
微信小程序 - 自定义头部导航栏组件（详解） + iphoneX以上遮挡小黑条适配问题
1. 导航栏计算: 导航栏总高度=状态栏高度+胶囊高度+(胶囊距顶距离-胶囊高度)*2 navHeight = statusBarHeight + menuButtonObject.height + ...
微信小程序自定义顶部导航栏navigationBar
自定义navigationBar怎么做? 去掉原生导航栏. 将需要自定义navigationBar页面的page.json的navigationBarTitleText去掉. 加上"navi ...

微信小程序自定义tabbar导航栏，中间凸出样式

微信小程序自定义tabbar导航栏，中间凸出样式相关推荐

最新文章

热门文章