uni-app

it2025-12-13  8

1.uniapp 的底部导航 是与微信小程序的底部导航配置一样的,最多5个最少2个,在pages中创建(右键pages输入文件名自动生成) color: 文字未选中时的颜色 selectedColor: 文字选中时的颜色 backgroundColor:背景颜色 borderStyle:只有black / white两个值

list: 单独导航的配置项pagePath: 绝对路径 写文件的路径text: 文字iconPath: 未选中时的图标selectedIconPath: 选中时的图标

图片尽量放在“static”文件夹下,因为会找不到图片路劲

//pages.json中 "tabBar":{ "color":"#ccc", "selectedColor":"#48", "backgroundColor":"#eee", "borderStyle":"black", "list": [ { "pagePath":"pages/index/index", "text": "首页", "iconPath":"static/imges/shou.png", "selectedIconPath":"static/imges/shou1.png" }, { "pagePath":"pages/search/search", "text": "搜索", "iconPath":"static/imges/serch.png", "selectedIconPath":"static/imges/serch1.png" }, ] }

2.修改原生导航栏 写在pages.json中的pages下的style中,

"pages": [{ "path": "pages/index/index", "style": { "navigationBarTitleText": "uni-ui基础项目",//页标题 "enablePullDownRefresh": true,//禁用或开启下拉刷新 "h5":{ "titleNView": false//修改原生导航栏 } } }

3.生命周期

文档链接

最新回复(0)