微信小程序不同身份登录，显示不同的tabbar（导航栏）

微信小程序，不同身份登录不同的底部导航栏。初次遇到这个问题，菜鸟的我没有一丝丝头绪，看了几篇博客后，终于明白了。下面是总结的模板，拿去直接用就欧克。

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

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

首先建一个template的文件夹，然后写入下面内容。写一个模板文件：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”

在app.js中自定义如下

  //app.js  App({onLaunch: function () {},//第一种底部  editTabBar: function () {//使用getCurrentPages可以获取当前加载中所有的页面对象的一个数组，数组最后一个就是当前页面。var curPageArr = getCurrentPages();    //获取加载的页面var curPage = curPageArr[curPageArr.length - 1];    //获取当前页面的对象var pagePath = curPage.route;    //当前页面urlif (pagePath.indexOf('/') != 0) {pagePath = '/' + pagePath;}var tabBar = this.globalData.tabBar;for (var i = 0; i < tabBar.list.length; i++) {tabBar.list[i].active = false;if (tabBar.list[i].pagePath == pagePath) {tabBar.list[i].active = true;    //根据页面地址设置当前页面状态    }}curPage.setData({tabBar: tabBar});},//第二种底部，原理同上editTabBar1: function () {var curPageArr = getCurrentPages();var curPage = curPageArr[curPageArr.length - 1];var pagePath = curPage.route;if (pagePath.indexOf('/') != 0) {pagePath = '/' + pagePath;}var tabBar = this.globalData.tabBar1;for (var i = 0; i < tabBar.list.length; i++) {tabBar.list[i].active = false;if (tabBar.list[i].pagePath == pagePath) {tabBar.list[i].active = true;}}curPage.setData({tabBar: tabBar});},globalData: {//第一种底部导航栏显示tabBar: {"color": "#9E9E9E","selectedColor": "#f00","backgroundColor": "#fff","borderStyle": "#ccc","list": [{"pagePath": "/pages/index/index","text": "职位","iconPath": "/images/my.png","selectedIconPath": "/images/my.png","clas": "menu-item","selectedColor": "#4EDF80",active: true},{"pagePath": "/pages/logs/logs","text": "简历","iconPath": "/images/my.png","selectedIconPath": "/images/my.png","selectedColor": "#4EDF80","clas": "menu-item",active: false},{"pagePath": "/pages/test/test","text": "我的","iconPath": "/images/my.png","selectedIconPath": "/images/my.png","selectedColor": "#4EDF80","clas": "menu-item",active: false}],"position": "bottom"},//第二种底部导航栏显示tabBar1: {"color": "#9E9E9E","selectedColor": "#f00","backgroundColor": "#fff","borderStyle": "#ccc","list": [{"pagePath": "/pages/index/index","text": "首页","iconPath": "/images/my.png","selectedIconPath": "/images/my.png","clas": "menu-item1","selectedColor": "#4EDF80",active: false},{"pagePath": "/pages/logs/logs","text": "消息","iconPath": "/images/my.png","selectedIconPath": "/images/my.png","selectedColor": "#4EDF80","clas": "menu-item1",active: true},{"pagePath": "/pages/cont/index","text": "简历","iconPath": "/images/my.png","selectedIconPath": "/images/my.png","selectedColor": "#4EDF80","clas": "menu-item1",active: false},{"pagePath": "/pages/detail/index","text": "我的","iconPath": "/images/my.png","selectedIconPath": "/images/my.png","selectedColor": "#4EDF80","clas": "menu-item1",active: false}],"position": "bottom"}}})

在app.wxss中定义显示样式

    .menu-item{  width: 32%;  float: left;  text-align: center;  padding-top: 8px;  }  .menu-item1{  width: 24%;  float: left;  text-align: center;  padding-top: 8px;  }  .img{width: 23px;  height: 23px;  display: block;  margin:auto;  }  .clear{  clear: both;  }  .tab-bar{  position: fixed;  width: 100%;  padding: 0px 2%;  }  .button{margin: 130px;}

接下来就是要去调用这个模板了，首先要在需要添加tabBar的wxml页面中添加，接下来就是js中，这样就设置完毕了，相信现在大家都知道如何来实现了//

下面是给出的小例子

index.wxml，用到自定义tabbar的页面的首部都需要引入模板文件

商家登录界面的登录按钮

商家进入的首页

index.js

//index.js
    var app = getApp();
    Page({
      data: {

      },
      onShow:function(){
        app.editTabBar();    //显示自定义的底部导航
      },
      tologs:function(){     //按钮的绑定事件，点击跳转至logs
        wx.redirectTo({
          url: '../logs/logs',
        })
      },
      onLoad: function () {

      }
    })

logs.wxml

用户顾客登录界面
<button bindtap='toindex' size='mini' class="button">点击切换</button>

用户顾客进入的首页

logs.js

//logs.js
    var app = getApp();
    Page({
      data: {

      },
      //点击按钮跳转页面
      toindex: function () {
        wx.redirectTo({
          url: '../index/index',
        })
      },
      onLoad: function () {
        //加载本页面的tabBar样式
        app.editTabBar1();
      }

    })

参考的博客：

微信小程序自定义底部导航栏，切换不同页面显示不同tabbar_small_lack的博客-CSDN博客_微信小程序底部导航自定义

微信小程序如何实现自定义tabBar_燚轩软件科技-CSDN博客_小程序如何自定义tabbar

微信小程序不同身份登录，显示不同的tabbar（导航栏）相关推荐

微信小程序从零开始开发步骤（三）底部导航栏
上一章节,我们分享了如何创建一个新的页面和设置页面的标题,这一章我们来聊聊底部导航栏是如何实现的.即点击底部的导航,会实现不同对应页面之间的切换. 我们先来看个我们要实现的底部导航栏的效果图:(三个导 ...
【微信小程序】使用uni-app——开发首页搜索框导航栏（可同时兼容APP、H5、小程序）
目录前言 App.H5效果小程序效果一.兼容APP.H5的方式二.兼容小程序三.实现同时兼容前言首页都会提供一个搜索框给到客户,让客户自己去搜索自己想要的内容,这里就需要导航栏,来实现搜 ...
制作微信小程序第三天（轮播图导航栏按钮框）
1.轮播图的实现 .wxss swiper{width: 100%;height: calc(100vm * 352 / 1125) } image{width:100% } .wxml <sw ...
微信小程序的详细登录(上)
前段时间发布了一个微信小程序的简单登录,那段时间我一直在忙着项目,有一天,我清闲下来准备进入小程序群里面看一下来着,刚好有人问问题了,我一看这哥们的问题好像是我写的东西啊,我感觉是时候秀一波了,是时候 ...
微信小程序的安全登录
一.微信小程序的安全登录让用户登录,标识用户和获取用户信息,以用户为核心提供服务,是大部分小程序都会做的事情.我们今天就来了解下在小程序中,如何做用户登录,以及如何去维护这个登录后的会话(Sessi ...
微信登录后台 java_Java 后端（Spring boot）+微信小程序的授权登录
微信小程序的授权登录第一.Java后端代码如下登录的接口的参数是微信小程序前端必须要传的参数微信小程序登录.授权的用户基本信息 wx.getUserInfo 特别注意 appid 和secret. ...
微信小程序之授权登录（附完整源码）
个人博客上已经同步更新了文章,有目录索引,阅读起来比较方便,欢迎大家移步个人博客上读阅~ 个人博客地址:http://zwd596257180.gitee.io/blog/2019/04/15/wec ...
微信小程序如何进行登录授权和获取用户信息
微信小程序如何进行登录授权和获取用户信息
java小程序显示多种按钮_微信小程序多行文本显示...+显示更多按钮和收起更多按钮功能...
看了很多帖子,但是效果都不是很好.还是找微信小程序官方文档,自己写比较方便.自己动手丰衣足食!话不多说,上代码! 先来个效果图 html {{item.text}} 查看更多收起 wxss .box ...

微信小程序不同身份登录，显示不同的tabbar（导航栏）

微信小程序不同身份登录，显示不同的tabbar（导航栏）相关推荐

最新文章

热门文章