站在前人基础上研究 =>大神原文,我是在此基础上自己改造的。
业务需求
中间的突出,点击就跳转去别的页面添加
知识点
- 微信自定义底部导航栏页面之间跳转是要用
wx.switchTab
,但是业务需求我不想跳转到tab页我只想wx.navigateTo
去别的(没有tabbar的)页面,你可能会说wx.hideTabBar
隐藏tabBar啊,但是这样返回页面会有问题。所以可以借助微信路由组件<navigator/>
- 但是如果想要中间的那个可以用
wx.navigateTo
,在app.json里的tabbar对象就不要把中间那页加上去,不然会被当做tab页无法使用wx.navigateTo
app里代码
这里只放另外的四页,中间那页别放
直接自定义tabbar
<template>
<view class="customTabbar" wx:if="{{tabBarShow}}" wx:class="{{{safeDistance:!bottomNum}}}">
<view class="cell" bindtap="onTabBarChange('user')">
<view class="imgBox">
<van-icon
class="customIcon {{tabBarActive === 'user' ? 'activeCor' : ''}}"
size="26"
name="wap-home"
/>
</view>
<text class="title {{ tabBarActive === 'user' ? 'activeCor' : '' }}">首页</text>
</view>
<view class="cell" bindtap="onTabBarChange('tab2')">
<view class="imgBox">
<van-icon
class="customIcon {{tabBarActive === 'tab2' ? 'activeCor' : ''}}"
size="26"
name="chart-trending-o"
/>
</view>
<text class="title {{ tabBarActive === 'tab2' ? 'activeCor' : '' }}">tab页2</text>
</view>
<!-- switchTab -->
<!-- <view class="cell" bindtap="onTabBarChange('mid')">
<view class="imgBox">
<image src="../assets/images/icon_release.png" mode="aspectFill" class="img_icon" />
</view>
<text class="title {{ tabBarActive === 'mid' ? 'activeCor' : '' }}">mid</text>
</view>-->
<!-- navigateTo -->
<navigator class="cell" hover-class="none" open-type="navigate" url="{{path}}">
<view class="imgBox">
<image src="../assets/images/icon_release.png" mode="aspectFill" class="img_icon" />
</view>
<text class="title {{ tabBarActive === 'mid' ? 'activeCor' : '' }}">添加</text>
</navigator>
<view class="cell" bindtap="onTabBarChange('tab3')">
<view class="imgBox">
<van-icon
class="customIcon {{tabBarActive === 'tab3' ? 'activeCor' : ''}}"
size="26"
name="chart-trending-o"
/>
</view>
<text class="title {{ tabBarActive === 'tab3' ? 'activeCor' : '' }}">tab页3</text>
</view>
<view class="cell" bindtap="onTabBarChange('my')">
<view class="imgBox">
<van-icon
class="title {{ tabBarActive === 'my' ? 'activeCor' : '' }}"
size="26"
name="user-circle-o"
/>
</view>
<text class="title {{ tabBarActive === 'my' ? 'activeCor' : '' }}">我的</text>
</view>
</view>
</template>
<script>
import { createComponent } from '@mpxjs/core'
import store from '../store'
createComponent({
data: {
activeFlag: 0,
path: '/pages/mid'
},
computed: {
tabBarActive() { // 用于标记那个激活
return store.state.tabBarActive
},
bottomNum() { // 判断是否是全面屏(demo可以不写)
return store.state.bottomNum
},
tabBarShow() { // 自定义导航栏无法使用wx.hidetabbar,可以用这个控制
return store.state.tabBarShow
}
},
methods: {
onTabBarChange(string) {
store.commit('CHANGE_TABER', string)
wx.switchTab({ url: '/pages/' + string })
}
}
})
</script>
<style lang="stylus">
.customTabbar
width 100%
display flex
justify-content space-between
border-top 1px solid #efefef
background #fff
.cell
width 20%
height 100rpx
display flex
flex-direction column
justify-content center
.imgBox
width 100%
height 50rpx
display flex
justify-content center
.img_icon
position absolute
/* left: 77rpx; */
top -36rpx
width 96rpx
height 96rpx
border-radius 50%
border-top 2rpx solid #f2f2f3
background-color #fff
text-align center
box-sizing border-box
padding 6rpx
.customIcon
color #909090
.title
font-size 24rpx
text-align center
color #909090
.activeCor
color #E92F20 !important
.safeDistance
margin-bottom 60rpx
</style>
<script type='application/json' lang='json'>
{
"component": true,
"usingComponents": {
"van-icon": "@vant-weapp/weapp/dist/icon/index"
}
}
</script>