这是运行的效果:
- 新建components组件文件夹,里面新建tabbarComponent文件夹,结构如下:
tabbar.js代码:
// tabBarComponent/tabBar.js
const app = getApp();
Component({
/**
* 组件的属性列表
*/
properties: {
tabbar: {
type: Object,
value: {
"backgroundColor": "#ffffff",
"color": "#979795",
"selectedColor": "#1c1c1b",
"list": [
{
"pagePath": "/pages/index/index",
"iconPath": "icon/icon_index.png",
"selectedIconPath": "icon/icon_indexIn.png",
"text": "首页"
},
{
"pagePath": "/pages/usercenter/usercenter",
"iconPath": "icon/icon_my.png",
"selectedIconPath": "icon/icon_myIn.png",
"text": "我的"
}
]
}
}
},
/**
* 组件的初始数据
*/
data: {
isIphoneX: app.globalData.isIphoneX? true : false
},
/**
* 组件的方法列表
*/
methods: {
choseNav:function(e){
console.log(e)
let sindex = e.currentTarget.dataset.sindex
switch(sindex){
case 0:
wx.switchTab({
url: '/pages/index/index'
})
break;
case 1:
wx.switchTab({
url: '/pages/usercenter/usercenter'
})
break;
}
}
}
})
tabbar.json代码:
{
"component": true,
"usingComponents": {}
}
tabbar.wxml代码:
<view class="tabbar_box {{isIphoneX?'iphoneX-height':''}}" style="background-color:{{tabbar.backgroundColor}}">
<block wx:for="{{tabbar.list}}" wx:key="item" wx:for-index="sindex">
<view bindtap="choseNav" class="tabbar_nav" data-sindex="{{sindex}}" hover-class="none" url="{{item.pagePath}}" style="color:{{tabbar.selectedColor}}">
<view class='special-wrapper {{item.selected?"pos-a":""}}'>
<image wx:if="{{item.selected}}" class="tabbar_icon" src="{{item.selectedIconPath}}"></image>
<image wx:else class="tabbar_icon" src="{{item.iconPath}}"></image>
</view>
<image class="circle" wx:if="{{item.selected}}" src="../../assets/icons/circle_shadow.png"></image>
<view class="placeholder" wx:if="{{item.selected}}"></view>
<view class="nav_txt {{item.selected?'checkColor':''}}">{{item.text}}</view>
</view>
</block>
</view>
tabbar.css代码:
.tabbar_box{
display: flex;
flex-direction: row;
justify-content: space-around;
position: fixed;
bottom: 0;
left: 0;
z-index: 999;
width: 100%;
box-shadow: 0px -5px 8px 0px rgba(26, 117, 87, 0.05);
}
.tabbar_box.iphoneX-height{
padding-bottom: 66rpx;
}
.tabbar_nav{
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 20rpx;
height: 100%;
position: relative;
padding-top: 10rpx;
padding-bottom: 10rpx;
}
.special-wrapper{
width: 50rpx;
height: 50rpx;
font-size: 0;
}
.special-wrapper.pos-a{
position: absolute;
left: 0;
right: 0;
margin: auto;
top: -30rpx;
width: 92rpx;
height: 92rpx;
border-radius: 50%;
background-color: #fff;
text-align: center;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
}
.circle{
position: absolute;
width: 130rpx;
height: 46rpx;
top: -46rpx;
left: 0;
right: 0;
margin: auto;
z-index: 9;
}
.special-wrapper .tabbar_icon{
width: 50rpx;
height: 50rpx;
}
.special-wrapper.pos-a .tabbar_icon{
width: 80rpx;
height: 80rpx;
}
.placeholder{
height: 50rpx;
height: 50rpx;
}
.nav_txt{
color: #9EA3B9;
font-size: 22rpx;
}
.checkColor{
color: #20CA8F;
}
app.js代码:
//初始化小程序
onLaunch: function () {
//隐藏系统tabbar
wx.hideTabBar();
},
onShow: function(){
//隐藏系统tabbar
wx.hideTabBar();
},
// 自定义导航
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: {
isIphoneX: false,
tabBar: {
"backgroundColor": "#ffffff",
"color": "#979795",
"selectedColor": "#1c1c1b",
"list": [
{
"pagePath": "/pages/index/index",
"iconPath": "icon/icon_index.png",
"selectedIconPath": "icon/icon_indexIn.png",
"text": "首页"
},
{
"pagePath": "/pages/usercenter/usercenter",
"iconPath": "icon/icon_my.png",
"selectedIconPath": "icon/icon_myIn.png",
"text": "我的"
}
]
}
}
app.json代码:
"tabBar": {
"custom": true,
"color": "#aaaaaa",
"selectedColor": "#FE5E78",
"backgroundColor": "#fff",
"borderStyle": "black",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "assets/icons/tabIcon/icon1.png",
"selectedIconPath": "assets/icons/tabIcon/icon1-s.png"
},
{
"pagePath": "pages/usercenter/usercenter",
"text": "我的",
"iconPath": "assets/icons/tabIcon/icon4.png",
"selectedIconPath": "assets/icons/tabIcon/icon4-s.png"
}
]
},
在页面中使用例子代码(index为例):
index.wxml代码:
// 引入组件
<tabbar tabbar="{{tabbar}}"></tabbar>
index.js代码:
var app = getApp()
Page({
data: {
//tabbar
tabbar: {},
},
onLoad: function (options) {
app.editTabbar();
},
})
index.json代码:
{
"navigationStyle": "custom",
"usingComponents": {
"tabbar": "../../components/tabbarComponent/tabbar"
}
}
以为就是自定义底部导航带弧度效果的完整代码!