问题描述

微信小程序的原生底部导航栏限制了数量（3-5个）且不能根据你的不用用户进行动态的底部导航栏变化，无法适应多种用户从一个小程序进入显示不同的底部导航栏功能的情况。只能适应多种用户使用相同的导航栏的情况，这与我们小程序的设计不相符合。

解决方法

看解决方法之前需要先学会微信小程序的自定义组件。
这里提出一种解决方法，如下所述。
由于微信小程序原生底部导航栏不支持动态变化，只能使用自定义底部导航栏。
微信小程序可以使用组件模板，所以将底部导航栏进行了一个模板的封装集成，增加了底部导航栏代码的复用性。
然后将底部导航栏的几个界面做成微信小程序自定义组件的模式，将这几个页面组件和底部导航栏组件添加进入一个页面之中，用户点击不同的底部导航栏对应显示不同的组件，已达到类别不同的用户底部导航栏不同的效果。

在登录时，识别用户的身份，使之进入不同的 index 界面（不同用户的 index 界面自定义导航栏数据不同，其中包含的自定义组件也不同，显示也就不同），从而达到不同用户底部导航栏不同的效果。

代码实现

底部导航栏

这部分代码可以自由变换的（我给的是一个由 ColorUI 来的简单底部导航栏模板）。

我们先看一下底部导航栏的 wxml 代码。

<!-- 普通菜单模板 -->
<!-- tabbar.wxml -->
<template name="tabBar"><view class="cu-bar tabbar bg-black shadow foot"  ><view class="action" bindtap="NavChange" data-cur="{{item.currentUrl}}" wx:for="{{menus.list}}" wx:key="currentUrl"><view class='cuIcon-cu-image'><image src="{{menus.activeUrl==item.currentUrl?item.checkedImgUrl:item.unCheckImgUrl}}"></image></view><view class="{{menus.activeUrl==item.currentUrl?'':'text-gray'}}" style="{{menus.activeUrl==item.currentUrl?'color:#1296DB;':''}}">{{item.title}}</view></view></view>
</template>

我们再看看底部导航栏的 wxss 代码，这部分需要引入 ColorUI 的 wxss 代码，当然也可以自己设计制作。

/* tabbar.wxss */
/* 需要引入 ColorUI 的 wxss */
@import "../../colorui/main.wxss";
@import "../../colorui/icon.wxss";.mytmpcz-1 {border: 3px dashed orange;
}

底部导航栏的菜单数据

//底部导航栏菜单
var checkPersonnel = {//排查员activeUrl: '/pages/checkPersonnel/check',//初始选择的导航栏list: [{currentUrl: "/pages/checkPersonnel/check",//界面地址unCheckImgUrl: "/images/check.png",//未选中图标checkedImgUrl: "/images/check_select.png",//选中图标btnType: 0,//消息数title: "排查",//该项导航栏名称}, {currentUrl: "/pages/checkPersonnel/audit",unCheckImgUrl: "/images/audit.png",checkedImgUrl: "/images/audit_select.png",btnType: 0,title: "审核"}, {currentUrl: "/pages/checkPersonnel/location",unCheckImgUrl: "/images/location.png",checkedImgUrl: "/images/location_select.png",btnType: 0,title: "位置"}, {currentUrl: "/pages/checkPersonnel/my",unCheckImgUrl: "/images/my.png",checkedImgUrl: "/images/my_select.png",btnType: 0,title: "我的"}]
}var company = {//公司activeUrl: '/company/abarbeitung',list: [{currentUrl: "/company/abarbeitung",unCheckImgUrl: "/images/abarbeitung.png",checkedImgUrl: "/images/abarbeitung_select.png",btnType: 0,title: "整改"}, {currentUrl: "/company/analyticsList",unCheckImgUrl: "/images/analytics.png",checkedImgUrl: "/images/analytics_select.png",btnType: 0,title: "数据分析"}, {currentUrl: "/company/my",unCheckImgUrl: "/images/my.png",checkedImgUrl: "/images/my_select.png",btnType: 0,title: "我的"}]
}module.exports = {//使菜单数据暴露checkPersonnel: checkPersonnel,company: company
}

排查员

排查员界面的 wxml。底部导航栏对应的 4 个界面全部制作为自定义组件的形式。

<!-- 排查员 index 界面的 wxml -->
<!-- 模板引入 -->
<import src="../../../miniprogram_npm/tabbar/tabbar.wxml" /><!-- 4 个底部导航栏对应的界面，都以组件形式引入 -->
<audit id="audit" wx:if="{{PageCur=='/pages/checkPersonnel/audit'}}"></audit>
<check id="check" wx:if="{{PageCur=='/pages/checkPersonnel/check'}}"></check>
<location id="location" wx:if="{{PageCur=='/pages/checkPersonnel/location'}}"></location>
<my id="my" wx:if="{{PageCur=='/pages/checkPersonnel/my'}}"></my><!-- 模板放置 -->
<template is="tabBar" data="{{menus}}" />

js 代码。

// pages/checkPersonnel/index/index.js
var menus = require("../../../utils/menus.js");//引入底部导航栏数据
Page({/*** 页面的初始数据*/data: {PageCur: '/pages/checkPersonnel/check'},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {this.setData({//设置界面底部导航栏数据menus: menus.checkPersonnel,PageCur: '/pages/checkPersonnel/check'})},/* ColorUI页面跳转方式 */NavChange(e) {var cur = e.currentTarget.dataset.cur;if(cur){this.setData({PageCur: cur,"menus.activeUrl": cur})}}
})

json 代码

{"usingComponents": {"audit": "/pages/checkPersonnel/audit/audit","check": "/pages/checkPersonnel/check/check","location": "/pages/checkPersonnel/location/location","my": "/pages/checkPersonnel/my/my"}
}

公司界面类似。

存在的问题

该解决方法在进入页面之后的第一次点击底部导航栏切换页面的时候存在闪屏（屏幕会闪一下）情况，原因是微信小程序原生适配的问题，后续点击不会出现闪屏现象。（目前没有找到解决办法）
由于微信小程序的自定义组件的开发限制，不如正常的界面，自定义底部导航栏的情况存在会导致一些方法无法使用或变得更加复杂得情况（下拉触底函数、数据的传递等）

微信小程序——不同角色的导航栏显示不同相关推荐

微信小程序开发错误——底部导航栏没有显示完全
微信小程序开发错误--底部导航栏没有显示完全原因:由于在app.json中设置跳转页面时,假设有A.B.C.D四个图标(点击可以跳转),B和C的跳转页面相同,C的图标就会覆盖B的图标,B的图标就相当 ...
微信小程序实现左侧滑动导航栏
微信小程序实现左侧滑动导航栏 1.左侧滑动导航栏图如下 2.这是我们左侧滚动栏的代码 wxml <view class='under_line'></view><view ...
微信小程序自定义头部标题导航栏
/*** 微信小程序头部自定义标题导航栏* * 参数:* pageTitle: 导航栏标题,默认不显示* navColor: 导航栏背景颜色,默认白色,透明为'transparent'属性值* noS ...
微信小程序实现自定义顶部导航栏（选项卡），固定导航栏和可滑动导航栏
微信小程序实现自定义顶部导航栏(选项卡),固定导航栏和可滑动导航栏固定导航栏可滑动导航栏顶部导航栏的需求实现: 顶部导航栏由列表渲染,通过tabclick点击事件改变activeIndex变量的 ...
Taro编译微信小程序实现顶部自定义导航栏
[需求] 使用taro开发微信小程序的过程中,涉及到小程序的需要自定义顶部导航栏(导航栏渐变色),微信小程序中只能够设置固定的颜色,渐变颜色以及添加其他按钮的操作就不能够通过小程序自带的api来实现 ...
微信小程序购物车和左侧导航栏
先上实现图话不多说,直接上代码 cars.js // const arr = require("../../utils/data"); // pages/cars/cars.j ...
微信小程序实现透明渐变导航栏
最近在微信小程序实现透明渐变的导航栏,刚好有接触wxs,所以尝试着用wxs实现.核心代码: <scroll-view scroll-y style="height: {{pageHei ...
微信小程序中自定义背景导航栏透明背景设置
首先确定好自己要在哪个页面中使用自定义头部导航栏样式在该页面中找到xxx.json文件中添加上 "navigationStyle":''custom" 这样在页面中头部 ...
html底部导航栏图标切换,【微信小程序】自定义底部导航栏，切换不同页面显示不同tabbar...
https://blog.csdn.net/small_lack/article/details/80959278 在一个微信小程序中想要用到两种不同的tabbar样式,需要在app.js中自定义,在 ...

微信小程序——不同角色的导航栏显示不同

文章目录