来自:https://blog.csdn.net/qq_43379916/article/details/120206962
1. app.json
// 需要先定义tabBar页面 // “pages” 配置里面也不要忘了 "tabBar": { "custom": true, "list": [ { "pagePath": "pages/index/index" }, { "pagePath": "pages/goods/index" } ] }
2. app.js
// app.js App({ //定义全局setTabbar方法 $setTabbar(that,currentName){ if(typeof that.getTabBar == 'function' && that.getTabBar()){ let tabbar = that.getTabBar(); console.log(tabbar); tabbar.setData({ currentName }) } } })
3. index.wxml,goods.wxmll
Page({ /** * 页面的初始数据 */ data: { }, onShow(){ /* 返回当前页面的 custom-tab-bar 的组件实例,详见【自定义 tabBar】 注意:自定义tabbar的名称必须为:custom-tab-bar,而且路径必须在根目录下 不然getTabBar方法找不到 */ getApp().$setTabbar(this,'index'); //'index' 根据页面来 在下面的tabbarList的name属性需要用到 } })
4. custom-tab-bar 组件必须在根目录,custom-tab-bar/index.wxml
5. custom-tab-bar/index.js
// ps:资源就自定义了哈 //声明这是一个组件 Component({ data:{ //组件私有数据 currentName:'index', //准备好自定义tabbar资源 //自定义的tabBar 需要在app.json配置中存在 tabbarList:[{ "pagePath": "/pages/index/index", //使用switchTab跳转时需要在page前面加上 / 斜杠 "text": "index", "iconPath": "../assets/tabbar/1-1.png", "selectedIconPath": "../assets/tabbar/1.png", "style":'', "name":'index' }, { "pagePath": "/pages/goods/index", "text": "goods", "iconPath": "../assets/tabbar/2-2.png", "selectedIconPath": "../assets/tabbar/2.png", "style":'', "name":'goods' }] }, lifetimes:{ //组件生命周期 attached(){ //在组件实列进入页面节点树时执行 console.log('嘿,我被执行了'); } }, methods:{ //组件定义的方法(浓浓的既视感) swicthTabbar(e){ let { index} = e.currentTarget.dataset; wx.switchTab({ url: this.data.tabbarList[index].pagePath, }) } } })
6. custom-tab-bar/index.wxml
<!-- 自定义tabbar文档介绍:https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html --> <!-- cover-view 是为了防止层级问题,目前原生组件均已支持同层渲染,使用view也是可以的 --> <!-- ps:文档里面说使用 cover-view,那就用这个实现一下 --> <!-- 会默认出现到最底部,覆盖在原生组件之上的文本视图 --> <cover-view class="custom-tabbar"> <cover-view wx:for="{{tabbarList}}" wx:key="index" class="tabbar-item" data-index="{{index}}" bindtap="swicthTabbar"> <cover-image src="{{currentName == item.name ? item.selectedIconPath : item.iconPath}}" class="tabbar-icon" style="{{item.style}}"></cover-image> <cover-view class="{{currentName == item.name ? 'text-active' : 'tabbar-text'}}">{{item.text}}</cover-view> </cover-view> </cover-view>
7. custom-tab-bar/index.wxss
.custom-tabbar{ position: fixed; bottom: 0; left: 0; right: 0; background-color: #fff; box-shadow: 0px 0px 4rpx rgba(0, 0, 0, 0.3); height: 96rpx; /*(兼容有安全区域的手机)*/ padding-bottom: constant(safe-area-inset-bottom);/*兼容 IOS<11.2*/ padding-bottom: env(safe-area-inset-bottom);/*兼容 IOS>11.2*/ display: flex; } .tabbar-item{ display: flex; justify-content:center; align-items: center; flex: 1; flex-direction: column; font-size: 24rpx; } .tabbar-icon{ width: 44rpx; height: 44rpx; } .tabbar-text{ color: #9c9c9c; } .text-active{ color: #000; }