uniapp-底部切换栏

举报
林太白 发表于 2024/12/13 09:13:50 2024/12/13
【摘要】 uniapp-底部切换栏​接下来我们就利用官方常规推荐我们的方式搭建我们的底部切换栏部分先来简单搭建底部切换栏需要的页面,然后进行一些自定义的样式更改这里我们搭建一个首页、文章列表、我的三个页面帮助我们进行简单的底部切换栏切换1、搭建文件夹​接下来我们看看菜单部分相关的设置和信息。☞ 建立我们的文件夹先,分别在pages下面搭建文件夹tabBar,里面包含我的页面和首页index.vuepa...

uniapp-底部切换栏

接下来我们就利用官方常规推荐我们的方式搭建我们的底部切换栏部分

先来简单搭建底部切换栏需要的页面,然后进行一些自定义的样式更改

这里我们搭建一个首页、文章列表、我的三个页面帮助我们进行简单的底部切换栏切换

1、搭建文件夹

接下来我们看看菜单部分相关的设置和信息。

☞ 建立我们的文件夹先,分别在pages下面搭建文件夹tabBar,里面包含我的页面和首页index.vue


pages
	tabBar
		my
			index.vue // 我的界面
		index
			index.vue // 首页
		article
			index.vue // 文章历史

如图所示:

uniapp-tab1.png

里面的内容也非常简单


<template>
	<view>首页</view>
</template>

<script>
</script>

<style>
</style>

2、 配置底部菜单栏

☞配置底部菜单我们得去根目录下面的pages.json

这个文件里面进行页面的配置就类似我们的路由,而控制我们菜单的就是tabBar 这个配置项

uniapp-tab2.png

把我们的图片先拿一下放起来,先放图片,开发属于底部界面tab栏目

uniapp-tab3.png

配置启动页面和底部tab切换栏目

uniapp-tab4.png

底部tab栏切换进行配置对应的界面

uniapp-tab5.png

3、配置页面导航页面

☞ 接下来我们先配置页面

在pages.json 文件里面进行配置,先配置底部导航栏,然后进行配置,默认的第一个文件就是我们的进入之后的第一个界面


"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
	{
		"path": "pages/tabBar/home/index",
		"style": {
			"navigationBarTitleText": "首页"
		}
	},
	{
		"path": "pages/tabBar/my/index",
		"style": {
			"navigationBarTitleText": "我的",
			"backgroundColor": "#F8F8F8"
		}
	}, {
		"path": "pages/tabBar/article/index",
		"style": {
			"navigationBarTitleText": "文章",
			"backgroundColor": "#F8F8F8"
		}
	}
],

4、配置页面tabBar

这个时候运行就可以看到我们已经显示了我们的主页,接下来我们就把上面的页面配置到咋们的tabBar里面


{
	"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/tabBar/home/index",
			"style": {
				"navigationBarTitleText": "首页"
			}
		},
		{
			"path": "pages/tabBar/my/index",
			"style": {
				"navigationBarTitleText": "我的",
				"backgroundColor": "#F8F8F8"
			}
		}, {
			"path": "pages/tabBar/article/index",
			"style": {
				"navigationBarTitleText": "文章",
				"backgroundColor": "#F8F8F8"
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"tabBar": {
		"color": "#7A7E83",
		"selectedColor": "#007AFF",
		"borderStyle": "black",
		"backgroundColor": "#F8F8F8",
		"list": [{
				"pagePath": "pages/tabBar/home/index",
				"iconPath": "static/component.png",
				"selectedIconPath": "static/componentHL.png",
				"text": "首页"
			},
			{
				"pagePath": "pages/tabBar/my/index",
				"iconPath": "static/api.png",
				"selectedIconPath": "static/apiHL.png",
				"text": "我的"
			},
			{
				"pagePath": "pages/tabBar/article/index"",
				"iconPath": "static/css.png",
				"selectedIconPath": "static/cssHL.png",
				"text": "文章"
			},
		]
	},
	"uniIdRouter": {}
}

搭建完成!

这里我搭建了一个简易版本我们看看效果

基本的底部我们已经利用官方推荐的搭建好了,但是我们觉得样式不太好看,这个时候可以更改其中的细项,比如我们的文字大小,颜色,背景颜色等等

调整以后我们进行预览。

uniapp-tab6.png

【声明】本内容来自华为云开发者社区博主,不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。