【Uni-App社区小程序】008-底部导航

訾博ZiBo

发布于 2025-01-06 15:21:27

6400

代码可运行

文章被收录于专栏：全栈开发工程师全栈开发工程师

运行总次数：0

代码可运行

一、效果图

二、素材获取

1、图标资源

从Iconfont-阿里巴巴矢量图标库获取即可，示例如图：

2、其他资源

其他资源可从源代码获取，源代码下载地址（蓝奏云）：

https://zibo1996.lanzous.com/i9F5uevnoyb

三、官方文档

1、官方文档地址

https://uniapp.dcloud.net.cn/collocation/pages?id=tabbar

2、截图

四、使用

1、新建页面

第一步：鼠标指针移到pages文件夹上，点击鼠标右键，新建页面

第二步：输入页面名字，点击创建即可

第三步：新页面信息会自动添加到配置文件

以此方式新建四个页面即可，示例代码如下：

<template>
	<view>
		消息
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>

</style>

2、tabBar配置

代码：

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				// 局部样式设置比全局样式设置优先级更高
				"navigationBarTitleText": "我的社区啦"
			}
		}
        ,{
            "path" : "pages/news/news",
            "style" : {}
        }
        ,{
            "path" : "pages/home/home",
            "style" : {}
        }
        ,{
            "path" : "pages/message/message",
            "style" : {}
        }
        ,{
            "path" : "pages/my/my",
            "style" : {}
        }
    ],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "我的社区",
		"navigationBarBackgroundColor": "#FFFFFF",
		"backgroundColor": "#FFFFFF"
	},
	"tabBar":{
		"color":"#333333",
		"selectedColor":"#FC5C82",
		"borderStyle":"black",
		"list":[
			{
				"pagePath":"pages/index/index",
				"text":"首页",
				"iconPath":"static/tabbar/index.png",
				"selectedIconPath":"static/tabbar/indexed.png"
			},{
				"pagePath":"pages/news/news",
				"text":"动态",
				"iconPath":"static/tabbar/news.png",
				"selectedIconPath":"static/tabbar/newsed.png"
			},{
				"pagePath":"pages/message/message",
				"text":"消息",
				"iconPath":"static/tabbar/paper.png",
				"selectedIconPath":"static/tabbar/papered.png"
			},{
				"pagePath":"pages/my/my",
				"text":"我的",
				"iconPath":"static/tabbar/home.png",
				"selectedIconPath":"static/tabbar/homeed.png"
			}
		]
	}
}