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

hiddenSharp429

已于 2022-12-24 17:59:34 修改

阅读量1.5k

点赞数

分类专栏：微信原生小程序文章标签：微信小程序 css html

于 2022-12-06 20:28:57 首次发布

本文链接：https://blog.csdn.net/Zchengjisihan/article/details/128209439

版权

微信原生小程序专栏收录该内容

31 篇文章 9 订阅

订阅专栏

目录

项目场景

效果图

解决方案

具体的代码

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;
  
  }