uni-app 自定义 tabBar
买泛域名SSL证书 送5斤装现摘猕猴桃一箱、同时提供技开源商城搭建免费技术支持。
泛域名ssl证书 239元1年送1个月、单域名39元1年，Sectigo（原Comodo证书）全球可信证书，强大的兼容性，高度安全性,如有问题7天内可退、可开发票
加微信VX 18718058521 备注SSL证书
【腾讯云】2核2G4M云服务器新老同享99元/年，续费同价
泛域名ssl证书 239元1年送1个月、单域名39元1年，Sectigo（原Comodo证书）全球可信证书，强大的兼容性，高度安全性,如有问题7天内可退、可开发票
加微信VX 18718058521 备注SSL证书
【腾讯云】2核2G4M云服务器新老同享99元/年，续费同价
效果：因为定制页是跳其它的页，就不点了
实现思维：把需要跳转的页面写在page.json中，在自定义tabBar组件，把原生的tabBar给隐藏掉
page.json
{
"pages": [
......原本内容
],
"globalStyle": {
"navigationBarTextStyle": "white",
"navigationBarTitleText": "",
"navigationBarBackgroundColor": "#800080",
"backgroundColor": "#F8F8F8"
//"navigationStyle": "custom"
},
"tabBar": {
"custom": true,//这是重点，不然在微信小程序中会有异常
"list":[
{
"pagePath": "pages/index/index"
},
{
"pagePath": "pages/home/home"
},
{
"pagePath": "pages/show/show"
}
]
}
}tabBar组件
这里可封装成你想要的样子，可以通过props传跳转路径,这就看你的组件封装怎么样了
<template>
<view class="tabBar">
<view class="tabBar-box">
<view class="tabBar-item" @click="toIndex('/pages/index/index')" >
<view class="rabLabel">
<text>商品</text>
<!--<view class="tabIcon">2</view>-->
</view>
</view>
<view class="tabBar-item" @click="toIndex('/pages/show/show')" >
<view class="rabLabel">
<text>定制</text>
<view class="tabIcon"></view>
</view>
</view>
<view class="tabBar-item" @click="toIndex('/pages/home/home')" >
<view class="rabLabel">
<text>我的</text>
<!--<view class="tabIcon">2</view>-->
</view>
</view>
</view>
</view>
</template>
<script>
export default {
methods:{
toIndex(url){
console.log(url);
uni.switchTab({
url: url
})
}
}
}
</script>
<style scoped>
.tabBar {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 100rpx;
background: #8a6de9;
}
.tabBar-box {
display: flex;
width: 100%;
height: 100%;
}
.tabBar-item{
display: flex;
justify-content: center;
align-items: flex-end;
flex: 1;
height: 100%;
background: #2C405A;
}
.rabLabel{
position: relative;
}
.tabIcon{
position: absolute;
top:0;
left:50%;
transform: translate(-50%,-100%);
width: 100rpx;
height: 100rpx;
border: solid 2px red;
border-radius: 50%;
text-align: center;
line-height: 100rpx;
background: #f0ad4e;
box-sizing: border-box;
}
</style>app.vue
隐藏原生的tabBar
<script>
import Vue from 'vue'
export default {
onLaunch: function () {
console.log('App onLaunch')
},
onShow: function () {
uni.hideTabBar({})//隐藏原生的tabBar
},
onHide: function () {
console.log('App Hide')
}
}
</script>main.js全局注册
import TabBar from './components/common/tabBar.vue'
Vue.component('tabBar', TabBar)在需要的页面使用
index页面//只要在你要的页面放入 <tabBar></tabBar>就ok,我这里就放一意思意思
<template>
<view>
<view class="top">
</view>
<view class="nav">
</view>
<view class="body" :style="{height:getRemainHeight+'rpx'}">
</view>
<tabBar></tabBar>
</view>
</template>
<script>
export default {
data() {
return {
}
},
computed: {
systemInfo() {
let res = uni.getSystemInfoSync()
return {
screenHeight: res.screenHeight || 0,
screenHeightRpx: (res.screenHeight * (750 / res.windowWidth)) || 0,
screenWidth: res.screenWidth || 0,
windowWidth: res.windowWidth || 0,
windowHeight: res.windowHeight || 0,
}
},
getRemainHeight() {
//得到乘下的高度，转成rpx
let systemInfo = this.systemInfo
let px = systemInfo.windowHeight - uni.upx2px(300 + 100+100)
return px * (750 / systemInfo.windowWidth)
},
},
}
</script>
<style scoped>
.top{
width: 100%;
height: 300rpx;
background: #4cd964;
text-align: center;
line-height: 300rpx;
}
.nav{
height: 100rpx;
background: grey;
text-align: center;
}
.body{
background: #2C405A;
box-sizing: border-box;
overflow: hidden;
}
</style>
