uni-app根据登录权限自定义底部tabBar

最新推荐文章于 2024-07-18 18:02:08 发布

dd小布丁

最新推荐文章于 2024-07-18 18:02:08 发布

阅读量2.2k

点赞数 1

分类专栏： uni-app 自定义tabBar 文章标签： uni-app

本文链接：https://blog.csdn.net/baidu_41644405/article/details/118520624

版权

本文介绍如何在uni-app中根据用户登录权限动态定制底部tabBar。首先在page.json取消写死配置，然后创建自定义tabBar组件，并在登录后的homeIndex页面引入，通过后端接口获取用户权限信息进行显示。最后讨论了页面元素点击跳转tab的实现方法。

摘要由CSDN通过智能技术生成

uni-app根据登录权限自定义底部tabBar

原来写死的tabBar, 突然接到需求要根据用户的权限来显示底部按钮

效果图：
在这里插入图片描述

一、page.json 取消原有写死的配置

page.json 取消原有写死的配置

二、自定义组件tabbar，以供后面在页面中引入，可以直接复制粘贴修改使用

<template>
	<view class="tarbar">
		<view class=".tarbar-list" :style="{
   
	                background: tabBar.backgroundColor,
	                color: tabBar.color,
	                'border-top': tabBar.position == 'bottom' ? '1rpx solid ' + tabBar.borderStyle : 0,
	                'border-bottom': tabBar.position == 'top' ? '1rpx solid ' + tabBar.borderStyle : 0
	            }">
			<view :class="tabList.length > 1 ? 'tarbar-list-ul' : 'tarbar-list-ul2'">
				<view class="tarbar-list-li" v-for="(item, index) in tabList" :key="index" @click.top="setSelected(index)">
					<block>
						<view class="tarbar-list-li-icon">
							<image :src="selected == index ? item.selectedIconPath : item.iconPath" mode=""></image>
						</view>
						<view :style='selected == index?"color:"+tabBar.selectedColor:""' class="tarbar-list-li-name">{
   {
    item.title }}</view>
					</block>
				</view>
			</view>
		</view>
		<!-- 		<block v-if="isShowMask">
			<release-popup @close-mask="closeMask"></release-popup<