一、效果图
二、素材获取
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"
}
]
}
}
截图: