微信小程序添加底部导航栏 您所在的位置:网站首页 微信小程序底部导航栏怎么设置 微信小程序添加底部导航栏

微信小程序添加底部导航栏

2023-08-30 15:39| 来源: 网络整理| 查看: 265

我们平时上微信可以看到,微信的底部是4个导航栏选项进行切换的,我们自己开发小程序时,如果要添加像微信那样的底部导航栏的话,其实实现方式非常简单,便捷。

在微信小程序开发IDE中,我们新建一个小程序项目,一下这些是必带的原有的一些文件。

要添加底部导航的信息,我们需要在“app.json”这个文件中加入“tabBar”这个参数,例如:

"tabBar": { "color": "#a9b7b7", "selectedColor": "#11cd6e", "borderStyle": "white", "list": [ { "selectedIconPath": "images/首页.png", "iconPath": "images/首页.png", "pagePath": "pages/index/index", "text": "首页" }, { "selectedIconPath": "images/分类.png", "iconPath": "images/分类.png", "pagePath": "pages/logs/logs", "text": "日志" }, { "selectedIconPath": "images/对话信息.png", "iconPath": "images/对话信息.png", "pagePath": "pages/user/userInfo", "text": "我的信息" }, { "selectedIconPath": "images/用户.png", "iconPath": "images/用户.png", "pagePath": "pages/user/userInfo", "text": "开心对话" } ] }

这里面的参数说明,可以参考官方文档:https://developers.weixin.qq.com/miniprogram/dev/framework/config.html

但是有一点需要注意的是,pagePath这个路径必须在pages这个参数中进行设置,不然会报错,在布局中用到哪些目录的必须在pages中定义。

"pages":[ "pages/index/index", "pages/logs/logs", "pages/user/userInfo" ],

最终设置完进行编译产生的结果为:



【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有