uni-app 底部导航栏tabBar

绝地灬酷狼 2023-02-12 05:41 3阅读 0赞

#### 1. 效果图 ####

![最终效果][20200523150813300.gif_pic_center]

#### 2. 实现 ####

*  在pages中添加 页面.vue
 *  在pages.json中注册页面以及配置tagBar

"pages": [ //pages数组中第一项表示应用启动页, 所有页面都要在这里注册
    		{ 
    			"path": "pages/movies/movies",
    			"style": { 
    				"navigationBarTitleText": "首页"
    			}
    		},
    		{ 
    			"path":"pages/user/user",
    			"style":{ 
    				"navigationBarTitleText": "用户"
    			}
    		}
    	],
    	"tabBar": { 
    		"color":"#C0C4CC",	// 未选中的菜单文字颜色
    		"selectedColor":"#007AFF", // 选中时的菜单文字颜色
    		"borderStyle":"black",
    		"backgroundColor":"#FFFFFF",
    		"list": [
    			// 首页
    			{ 
    				"pagePath": "pages/movies/movies", // 第一个tab对应的页面
    				"iconPath": "static/logo.png", // 未选中时的图片，可以从static中获取
    				"selectedIconPath": "static/logo.png" ,// 选中时的图片
    				"text": "首页" // 菜单文字
    			},
    			// 用户
    			{ 
    				"pagePath": "pages/user/user", // 第一个tab对应的页面
    				"iconPath": "static/logo.png", // 未选中时的图片，可以从static中获取
    				"selectedIconPath": "static/logo.png" ,// 选中时的图片
    				"text": "用户" // 菜单文字
    			}
    		]
    	},

[20200523150813300.gif_pic_center]: https://img-blog.csdnimg.cn/20200523150813300.gif#pic_center

发表评论取消回复

表情：

评论列表（有 0 条评论，3人围观）

还没有评论，来说两句吧...

相关阅读

相关底部导航栏

1.添加相应的文件 2.分别加入4个Fragment以及布局文件 3.MianActivity的引用 4.MainActivity的布局文件添加相应的文件：

我就是我/ 2023年08月17日 17:09/ 0 赞/ 2 阅读

相关微信小程序 - 底部导航栏配置demo（tabBar）

"tabBar":{ "list":[ { "text":"每周推荐",/显示的文本/

水深无声/ 2023年02月27日 13:55/ 0 赞/ 3 阅读

相关微信小程序[电商]-Tabbar 实现底部导航栏

效果图 > 底部导航的切换效果，首页和我的页面切换的时候走在底部导航，而分类和购物车页面切换会跳转新页面。如果使用[【微信原生的底部tab】][tab]是没法实现这个效果

太过爱你忘了你带给我的痛/ 2023年02月23日 03:56/ 0 赞/ 51 阅读

相关 uni-app 底部导航栏tabBar

1. 效果图 ![最终效果][20200523150813300.gif_pic_center] 2. 实现在pages中添加页面.vue 在pa

绝地灬酷狼/ 2023年02月12日 05:41/ 0 赞/ 4 阅读

相关小程序入门到实现底部导航栏tabbar

参考文档 [小程序开发·指南·框架·API等][API] [小程序介绍·开发·注册·主体信息·支付][Link 1] [小程序·开发支持][Link 2] [

我会带着你远行/ 2022年02月03日 01:53/ 0 赞/ 579 阅读

相关底部导航栏效果

<template> <view class="me"> 消息列表界面 </view> </template> <

短命女/ 2021年09月19日 10:36/ 0 赞/ 564 阅读

相关 uniapp 如何配置导航栏下底部线条

uniapp导航栏下的线条显示 , 只需要在pages.json页面就行配置就可以了 , 但是一定要在手机上运行查看 , 因为电脑上的预览是看不到的图示: 只需要把圈住

╰+哭是因爲堅強的太久メ/ 2021年07月25日 15:27/ 0 赞/ 1560 阅读

相关 rn 底部导航栏

(1)安装 yarn add @react-navigation/native yarn add react-native-gesture-hand

秒速五厘米/ 2021年07月24日 23:57/ 0 赞/ 694 阅读

相关 uniapp 导航栏tabBar

注意: (1)当设置导航栏在顶部,即position为top时,只能配置文字,不能配置图标 (2)当设置导航栏在顶部时,仅微信有效 (3)图标不

超、凢脫俗/ 2021年07月24日 23:15/ 0 赞/ 791 阅读

相关微信小程序 tabBar底部/顶部导航栏跳转

api->界面->tabBar 指南->基础能力->自定义tabBar 底部导航栏 (1)最少2个页面,最多5个页面 (2)使

阳光穿透心脏的1/2处/ 2021年07月24日 11:41/ 0 赞/ 793 阅读