微信小程序 自定义底部导航
2022-04-01 本文已影响0人
AAA_si
先看效果
footer.png
很多时候微信小程序自带的tabBar已不满足需求，转而使用微信小程序的自定义tarbar，进行动态展示，但遇到了首次点击每个item会有闪烁的情况，每个点击完之后，才会恢复正常。
本文自定义tarbar没有解决闪烁的情况。
如需要看下一篇文章--微信小程序 自定义底部导航闪烁解决正在加急完成预计明天
app.json
{
"pages": [
"pages/footer/footer",
"pages/header/header",
"pages/my/my"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "wx",
"navigationBarTextStyle": "black"
},
"tabBar": {
"backgroundColor": "#ffffff",
"color": "#CCCCCC",
"selectedColor": "#000",
"list": [
{
"pagePath": "pages/footer/footer",
"text": "首页",
"iconPath": "components/tabbar/icon/tab1.png",
"selectedIconPath": "components/tabbar/icon/tab1-active.png"
},
{
"pagePath": "pages/header/header",
"iconPath": "components/tabbar/icon/icon_release.png",
"isSpecial": true,
"text": ""
},
{
"pagePath": "pages/my/my",
"text": "我的",
"iconPath": "components/tabbar/icon/tab4.png",
"selectedIconPath": "components/tabbar/icon/tab4-active.png"
}
]
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
⚠️ "tabBar"重点，自定义tabbar也需要写，但是在app.js中隐藏默认的tabbar
app.js
//app.js
App({
onLaunch: function () {
// 隐藏系统tabbar
wx.hideTabBar();
// 获取设备信息
this.getSystemInfo();
},
getSystemInfo: function () {
let t = this;
wx.getSystemInfo({
success: function (res) {
t.globalData.systemInfo = res;
}
});
},
editTabbar: function () {
let tabbar = this.globalData.tabBar;
let currentPages = getCurrentPages();
let _this = currentPages[currentPages.length - 1];
let pagePath = _this.route;
(pagePath.indexOf('/') != 0) && (pagePath = '/' + pagePath);
for (let i in tabbar.list) {
tabbar.list[i].selected = false;
(tabbar.list[i].pagePath == pagePath) && (tabbar.list[i].selected = true);
}
_this.setData({
tabbar: tabbar
});
},
globalData: {
userInfo: null,
tabBar:{
"backgroundColor": "#ffffff",
"color": "#CCCCCC",
"selectedColor": "#000",
"list": [
{
"pagePath": "/pages/footer/footer",
"iconPath": "icon/tab1.png",
"selectedIconPath": "icon/tab1-active.png",
"text": "首页"
},
{
"pagePath": "/pages/header/header",
"iconPath": "icon/icon_release.png",
"isSpecial": true,
"text": ""
},
{
"pagePath": "/pages/my/my",
"iconPath": "icon/tab4.png",
"selectedIconPath": "icon/tab4-active.png",
"text": "我的"
},
]
}
}
})
⚠️ this.getSystemInfo() === 获取设备信息，因为iosX系统适配
下面tabbar组件和引入并使用
目录结构
-- components // 公共组件
-- tabbar // 自定义导航组件
-- icon // 图片
-- tabbar.js
-- tabbar.json
-- tabbar.wxml
-- tabbar.wxss
-- pages // 页面
-- footer // 需要引入自定义导航的页面
-- footer.js
-- footer.json
-- footer.wxml
-- footer.wxss
-- header // 需要引入自定义导航的页面
-- header.js
-- header.json
-- header.wxml
-- header.wxss
-- my // 需要引入自定义导航的页面
-- my.js
-- my.json
-- my.wxml
-- my.wxss
自定义导航组件
tabbar.wxml
<view class="tabbar_box {{isIphoneX?'iphoneX-height':''}}" style="background-color:{{tabbar.backgroundColor}}">
<block wx:for="{{tabbar.list}}" wx:key="{{item.pagePath}}">
// 二维码
<navigator wx:if="{{item.isSpecial}}" class="tabbar_nav" hover-class="none" url="{{item.pagePath}}" style="color:{{tabbar.selectedColor}}" open-type="switchTab">
<view class='special-wrapper'><image class="tabbar_icon" src="{{item.iconPath}}"></image></view>
<image class='special-text-wrapper'></image>
<text>{{item.text}}</text>
</navigator>
// 其它
<navigator wx:else class="tabbar_nav" hover-class="none" url="{{item.pagePath}}" style="color:{{item.selected ? tabbar.selectedColor : tabbar.color}}" open-type="switchTab">
<image class="tabbar_icon" src="{{item.selected ? item.selectedIconPath : item.iconPath}}"></image>
<text>{{item.text}}</text>
</navigator>
</block>
</view>
tabbar.wxss
.tabbar_box{
display: flex;
flex-direction: row;
justify-content: space-around;
position: fixed;
bottom: 0;
left: 0;
z-index: 999;
width: 100%;
height: 100rpx;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
}
.tabbar_box.iphoneX-height{
padding-bottom: 66rpx;
}
.middle-wrapper{
position: absolute;
right: 310rpx;
bottom: 0;
background-color: rgb(121, 27, 27);
width: 120rpx;
height: 120rpx;
border-radius: 50%;
border-top: 2rpx solid #f2f2f3;
}
.middle-wrapper.iphoneX-height{
bottom: 66rpx;
}
.tabbar_nav{
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 20rpx;
height: 100%;
padding:5px 0px 5px 0px;
position: relative;
}
.tabbar_icon{
width: 56rpx;
height: 56rpx;
padding-bottom: 0rpx;
}
.special-wrapper{
position: absolute;
/* left: 77rpx; */
top: -36rpx;
width: 120rpx;
height: 120rpx;
border-radius: 50%;
border-top: 2rpx solid #f2f2f3;
background-color: #fff;
text-align: center;
box-sizing: border-box;
padding: 6rpx;
}
.special-wrapper .tabbar_icon{
width: 120rpx;
height: 120rpx;
}
.special-text-wrapper{
width: 56rpx;
height: 56rpx;
}
text{
padding-bottom: 20rpx;
}
c.js
const app = getApp();
Component({
/**
* 组件的属性列表
*/
properties: {
tabbar: {
type: Object,
value: {
"backgroundColor": "#ffffff",
"color": "#979795",
"selectedColor": "#1c1c1b",
"list": [
{
"pagePath": "/pages/footer/footer",
"iconPath": "icon/tab1.png",
"selectedIconPath": "icon/tab1-active.png",
"text": "首页"
},
{
"pagePath": "/pages/header/header",
"iconPath": "icon/icon_release.png",
"isSpecial": true,
"text": ""
},
{
"pagePath": "/pages/my/my",
"iconPath": "icon/tab4.png",
"selectedIconPath": "icon/tab4-active.png",
"text": "我的"
},
]
}
}
},
data: {
isIphoneX: app.globalData.systemInfo.model.search('iPhone X') != -1 ? true : false
},
methods: {
}
})
tabbar.json
{
"component": true,
"usingComponents": {}
}
自定义导航基本可以，下面在页面中引入并使用
footer.wxml, header.wxml, my.wxml
<view>
footer footer
</view>
<foot></foot>
footer.json, header.json, my.json
{
"usingComponents": {
"foot":"../../components/tabbar/tabbar"
},
"navigationBarTitleText": "自定义底部"
}
footer.js, header.js, my.js
//获取应用实例
const app = getApp()
Page({
data: {
},
onLoad: function (options) {
app.editTabbar();
},
})
