微信小程序底部导航栏中间突出

站在前人基础上研究 =>大神原文，我是在此基础上自己改造的。

业务需求

中间的突出，点击就跳转去别的页面添加

知识点

微信自定义底部导航栏页面之间跳转是要用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-iconclass="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-iconclass="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-iconclass="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-iconclass="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">
.customTabbarwidth 100%display flexjustify-content space-betweenborder-top 1px solid #efefefbackground #fff.cellwidth 20%height 100rpxdisplay flexflex-direction columnjustify-content center.imgBoxwidth 100%height 50rpxdisplay flexjustify-content center.img_iconposition absolute/* left: 77rpx; */top -36rpxwidth 96rpxheight 96rpxborder-radius 50%border-top 2rpx solid #f2f2f3background-color #ffftext-align centerbox-sizing border-boxpadding 6rpx.customIconcolor #909090.titlefont-size 24rpxtext-align centercolor #909090
.activeCorcolor #E92F20 !important
.safeDistancemargin-bottom 60rpx
</style>
<script type='application/json' lang='json'>{ "component": true,"usingComponents": {"van-icon": "@vant-weapp/weapp/dist/icon/index"}}
</script>

微信小程序底部导航栏中间突出相关推荐

微信小程序-底部导航栏
注册一个小程序appId,新建自己的项目,了解小程序的框架结构. 制作底部导航栏时,添加导航按钮关联页面,注意配置在app.json配置page时,要把第一个导航按钮页面放在第一个位,不然其他页面会覆 ...
自定义微信小程序底部导航栏
效果目录 1.在根目录创建custom-tab-bar文件夹 (1)index.js Component({data: {selected: 0,color: "#59595b" ...
微信小程序自定义导航栏机型适配--底部Tabbar--view高度--底部按钮适配
自定义微信小程序头部导航栏自定义微信小程序头部导航栏,有几种方式方式一 {"navigationStyle": "custom" // 将navigatio ...
php底部导航栏,关于微信小程序底部导航栏目的开发
这篇文章主要介绍了微信小程序底部导航栏目开发资料的相关资料,微信小程序底部想要有一个漂亮的导航栏目,不知道怎么制作,于是百度找到了本篇文章,分享给大家,需要的朋友可以参考下微信小程序底部导航栏目 ...
微信小程序底部导航Tabbar
1,底部导航栏这个功能是非常常见的一个功能,基本上一个完成的app,都会存在一个导航栏,那么微信小程序的导航栏该怎么实现呢?经过无数的踩坑,终于实现了,好了,先看看效果图. 2,对于底部导航栏,小程序 ...
小程序tabbar能放分包路径吗_微信小程序底部导航Tabbar
底部导航栏这个功能是非常常见的一个功能,基本上一个完成的app,都会存在一个导航栏,那么微信小程序的导航栏该怎么实现呢?经过无数的踩坑,终于实现了,好了,先看看效果图. 对于底部导航栏,小程序上给出的 ...
微信小程序头部导航栏自定义
微信小程序头部导航栏自定义参考网址微信开放文档 navigationStyle导航栏样式:仅支持以下值:default默认样式,custom 自定义导航栏,只保留右上角胶囊按钮配置示例 {&quo ...
微信小程序自定义导航栏（带汉堡包菜单）
微信小程序自定义导航栏(带汉堡包菜单) 1.在app.json中 window配置navigationStyle (如果单独页面使用,可在页面的json文件配置) 2.计算相关值整个导航栏的高度: ...
微信小程序navigationBarTitleText导航栏标题设置
微信小程序navigationBarTitleText导航栏标题设置全局设置 app.json "window": { "navigationBarTextStyle& ...
微信小程序自定义导航栏 navigation bar 返回键首页
微信小程序自定义导航栏(wx_custom_navigation_bar) 自定义返回键.首页键,动态设置标题,响应式组件版本号:2.0.0 作者:chen-yt github: https://g ...

微信小程序底部导航栏中间突出

业务需求

知识点

app里代码

直接自定义tabbar

微信小程序底部导航栏中间突出相关推荐

最新文章

热门文章