微信小程序01-底部导航栏设置
2023-09-11 14:19:17 时间
效果图
操作步骤:
1 在app.json找到 pages,增加pages配置地址栏路径,保存后会自动生成相应文件夹;
2,增加 tabBar 参数,“selectedColor” 参数是设置选中后文字的颜色;"list" 中放置导航数据。
list 中 相关参数: pagePath ----> 指向地址
text ----> 导航文字
iconPath -----> 导航图标
selectedIconPath -----> 选中状态下导航图标
{
"pages": [
"pages/index/index",
"pages/list/list",
"pages/mine/mine",
"pages/logs/logs"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "小哲个人商店",
"navigationBarTextStyle": "black",
"backgroundColor": "#eeeeee"
},
"tabBar": {
"selectedColor": "#fc5531",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "./images/home.png",
"selectedIconPath": "./images/selected-home.png"
},
{
"pagePath": "pages/list/list",
"text": "列表",
"iconPath": "./images/list.png",
"selectedIconPath": "./images/selected-list.png"
},
{
"pagePath": "pages/mine/mine",
"text": "我的",
"iconPath": "./images/mine.png",
"selectedIconPath": "./images/selected-mine.png"
}
]
},
"debug": true,
"style": "v2",
"sitemapLocation": "sitemap.json"
}
相关文章
- 微信推送消息--发送模板消息
- 微信小程序加密数据(encryptedData)解密中的PHP代码,php7.1报错
- Slog71_选取、上传和显示本地图片GET !(微信小程序之云开发-全栈时代3)
- 微信小程序_(组件)view视图容器
- 微信分享网页链接缩略图不显示解决方法
- 微信小程序跳到h5,h5在跳回小程序
- 微信小程序
- 微信小程序中同步 异步的使用
- signalr 应用于微信小程序(二)
- signalr 应用于微信小程序(一)
- 最新微信小程序抓包方法
- 微信小程序 和 HTML5APP 开发资源
- 微信小程序----CSS 的空格处理
- 微信小程序----自定义加载图标
- 微信小程序----gallery slider(图片轮播)组件
- 如何在微信小程序中优雅地发送异步请求
- 微信小程序自定义picker多列选择器
- SAP系统和微信集成的系列教程之九:如何将微信用户发送给微信公众号的内容自动转存到SAP C4C系统
- 微信朋友圈自动点赞(Python代码实现)
- 微信小程序获取用户openId
- 微信小程序自动化测试实战,支持录制回放、智能遍历
- Linux|centos7下部署安装alertmanager并实现邮箱和微信告警(基础篇---三)
- 微信小程序(原生)——底部导航
- 使用chatgpt实现微信聊天小程序(秒回复),github开源(附带链接)