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

最新推荐文章于 2024-10-16 08:00:00 发布

原创

最新推荐文章于 2024-10-16 08:00:00 发布 · 3.7k 阅读

11 ·

CC 4.0 BY-SA版权

在一个微信小程序中想要用到两种不同的tabbar样式，需要在app.js中自定义，在页面加载时进行调用。
在这里插入图片描述
第一个tabbar
首先有一个模板文件：tabbar.wxml

<template name="tabBar">    
  <view class="tab-bar" style="color: {
  
  {tabBar.color}}; background: {
  
  {tabBar.backgroundColor}}; {
  
  {tabBar.position=='top'? 'top: 0' : 'bottom: 0'}};">    
  <block wx:for="{
  
  {tabBar.list}}" wx:key="pagePath">    
    <navigator hover-class="none" 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 class="tabbar_text">{
  
  {item.text}}</text>    
    </navigator>    
    </block>  
    <view class="clear"></view>    
  </view>    
</template>

在app.js中自定义如下
这里我的cbl是封装好的请求

const cbl = require('utils/cbl.js');
var usercode=""
App({
  onLaunch: function () {

    var that=this;
    wx.getStorage({
      key: 'userinfo',
      success: function(res) {
        if(res.data){
          usercode = res.data.UserCode;
        }else{
          usercode = ""
        }
      }
    })
  },
  //第一种底部  
  editTabBar: function () {