微信小程序自定义底部导航栏，切换不同页面显示不同tabbar

最新推荐文章于 2025-05-26 11:23:29 发布

原创

最新推荐文章于 2025-05-26 11:23:29 发布 · 5w 阅读

141 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

在一个微信小程序中想要用到两种不同的tabbar样式，需要在app.js中自定义，在页面加载时进行调用。

比如一个小程序需要两个版本（用户版、商家版），并且能通过一个按钮在两个版本间进行切换，可能会用到这种方式。

此处以两个页面（index，logs）显示两种tabbar样式为例，通过切换按钮进行切换。

首先有一个模板文件：tabbar.wxml

<template name="tabBar">    
  <view class="tab-bar" style="color: {
  
  {tabBar.color}}; background: {
  
  {tarBar.backgroundColor}}; {
  
  {tabBar.position=='top'? 'top: 0' : 'bottom: 0'}}; {
  
  {tabBar.borderStyle? (tabBar.position=='top'? 'border-bottom: solid 1px '+tabBar.borderStyle + ';' : 'border-top: solid 1px '+tabBar.borderStyle + ';') : ''}}">    
  <block wx:for="{
  
  {tabBar.list}}" wx:key="pagePath">    
    <navigator url="{
  
  {item.pagePath}}" open-type="redirect" class="{
  
  {item.clas}}" style="{
  
  {item.active? 'color: '+(item.selectedColor? item.selectedColor : tabBar.selectedColor) : ''}}">    
      <image src="{
  
  {item.selectedIconPath}}" wx:if="{
  
  {item.active}}" class="img"></image>    
      <image src="{
  
  {item.iconPath}}" wx:if="{
  
  {!item.active}}" class="img"></image>  
      <text>{
  
  {item.text}}</text>    
    </navigator>    
    </block>  
    <view class="clear"></view>    
  </view>    
</template>

在app.json中无需定义“tabBar”

在