目录

项目场景

效果图

解决方案

具体的代码

wxml

wxss

素材库

题外话

项目场景

一个小程序可以拥有用户端和审批端，但微信原生小程序规定只能有一个tabar在小程序中，但是一旦是多端口的小程序，又需要tabar来跳转页面那该怎么办呢？这里介绍一种比较简单的方法。

效果图

问题描述

小程序自带的tabar（在json文件中设置）

自制的简易tabar

解决方案

核心思想：设计方案是设置一个盒子永远沉在页面的最底部（无论这个页面有多高），并且这个盒子与页面的内容位于同一个图层（无遮挡）。然后将矢量图标以及提示文件放如盒子里做成上图的样式。

具体的代码

wxml

<view class="container"><view class="container_content"><view class="box">//里面是你的内容</view><!-- 简易导航栏 --><view class="tabar"><view class='goApprovalButton' bindtap="goApprovalPage"><image src="../../icon/approval(1).png" style="width:         40px; height: 40px; margin-top: 5px;"></image><view class="button_content">待审批</view></view><view class="goPassButton" bindtap="goPassPage"><image src="../../icon/pass(1).png" style="width: 40px; height: 40px; margin-top: 5px;"></image><view class="button_content">已通过</view></view><view class="goRejectButton" bindtap="goRejectPage"><image src="../../icon/reject(1).png" style="width: 40px; height: 40px; margin-top: 5px;"></image><view class="button_content">已驳回</view></view><view class="goEndingButton" bindtap="goEndingPage"><image src="../../icon/end.png" style="width: 40px; height: 40px; margin-top: 5px;"></image><view class="button_content">已结束</view></view></view></view>
</view>

wxss

   .goApprovalButton{position: absolute;bottom:0px ;left: 0px;color:#FFFFFF;background-color:#FFFFFF;border-top: 2px solid grey;width: 25%;height: 70px;text-align:center;margin-top: 10px;}.goPassButton{position: absolute;bottom:0px ;left: 25%;color:#FFFFFF;background-color:#FFFFFF;border-top: 2px solid grey;width: 25%;height: 70px;text-align:center;margin-top: 10px;}.goRejectButton{position: absolute;bottom:0px ;left: 50%;color:#FFFFFF;background-color:#FFFFFF;border-top: 2px solid grey;width: 25%;height: 70px;text-align:center;margin-top: 10px;}.goEndingButton{position: absolute;bottom: 0px;left: 75%;color:#FFFFFF;background-color: white;border-top: 2px solid grey;width: 25%;height: 70px;text-align:center;margin-top: 10px;}.button_content{font-size: 15px;color: black;}.container{position: relative;}.container_content{position: relative;min-height: 100vh;box-sizing: border-box;padding-bottom: 60rpx;padding-top: 0rpx;}.tabar{width: 100%;text-align: center;letter-spacing: 4rpx;position: absolute;bottom: 0;}

素材库

此外，很多矢量图片可以到阿里巴巴矢量图标库里查找，地址我放在下面了。

iconfont-阿里巴巴矢量图标库

题外话

如果有疑问欢迎大家留言讨论，你如果觉得这篇文章对你有帮助可以给我一个免费的赞吗？我们之间的交流是我最大的动力！

微信小程序自定义的导航栏相关推荐

微信小程序自定义顶部导航栏标题 navigationStyle
微信小程序自定义顶部导航栏标题单页面自定义导航栏修改需要自定义的页面,的页面配置.json文件全部页面自定义导航修改公共页面配置app.json 单页面自定义导航栏修改需要自定义的页面,的 ...
（转载）微信小程序自定义头部导航栏
本文转载自微信小程序自定义头部导航栏微信小程序自定义头部导航栏先看下demo的效果: 最终要实现的效果: 在tabbar页面不显示左侧按钮: 分享出去的页面进入后不显示左侧返回按钮: 点击返回按钮 ...
原声微信小程序自定义顶部导航栏 . 自定义navigationBar。 (单页面设置)
本文实例为大家分享了微信小程序自定义导航栏的具体代码,供大家参考,具体内容如下实现自定义大致需要以下?步骤: 1.在页面.JSON文件进行相关配置,以便去掉原生 "navigationSt ...
微信小程序自定义搜索导航栏
自定义微信小程序导航栏因为项目需要,要实现如京东小程序类似的搜索导航栏-下图所示搜索框在导航栏中.参考了官方API最终实现了该有的效果,顺便吧此次实现的思路和代码记录下来. 一.拆解分析按照正常的 ...
微信小程序自定义tabbar导航栏，中间凸出样式
这种样式的底部导航栏使用微信小程序的自定义tabBar:微信小程序官方说明 uni.app=>在 page.json 中的 tabBar 项指定 custom 字段为true: "t ...
uniapp开发微信小程序自定义顶部导航栏
自定义导航栏渐变色,先上效果使用uniapp开发小程序,在不同界面,要去对页面进行修改顶部导航栏. 比如说要去定义导航栏的背景颜色,常规的去定义导航栏背景颜色全局定义导航栏 "windo ...
微信小程序自定义navigation-bar导航栏(自适应安卓苹果)
最近在写商城,中途遇到了需要自定义修改导航栏的操作,大概是如下图接过样子的,于是想手写一份,但我发现右上角的分享按钮在不同设备离顶部的距离是不一样的,于是找了下官方划水员写的文档(点这里查看),(⊙o ...
微信小程序 - 自定义头部导航栏组件（详解） + iphoneX以上遮挡小黑条适配问题
1. 导航栏计算: 导航栏总高度=状态栏高度+胶囊高度+(胶囊距顶距离-胶囊高度)*2 navHeight = statusBarHeight + menuButtonObject.height + ...
微信小程序自定义顶部导航栏navigationBar
自定义navigationBar怎么做? 去掉原生导航栏. 将需要自定义navigationBar页面的page.json的navigationBarTitleText去掉. 加上"navi ...

微信小程序自定义的导航栏