第三章: 微信小程序底部导航栏的实现(详细)

2024-06-16 00:02:56

微信小程序底部导航栏的实现

一. 下载图标

给大家推荐一个网站: Iconfont-阿里巴巴矢量图标库
网址: http://www.iconfont.cn/collections/show/29

下载自己需要用到的图标, 例如首页 , 搜索 ,用户头像等一些常用的图标，点击下载保存到本地就可以啦

二.新建images文件

在项目目录中新建一个images文件夹，把下载好的图标放在文件夹里面，命名保存

三.添加配置文件

在项目中找到配置文件 app.json , 并加入如下配置信息:

 "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/test/test","text": "测试"}]},

app.json解释:

主要用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

OK，编译, 我们可以看到底部导航效果完美实现~

小程序的官方文档参考文档：(提供了更多的丰富的组件和样式)
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#tabBar
在这里给大家提供一份微信小程序源码,大家可以克隆到本地
GitHub: https://github.com/yuanqingjian/myproject

您的鼓励就是我最大的创作动力！
如果大家觉得这篇博客不错的话,请多多点赞支持哦!
作者: 程序猫A建仔
QQ: 651405985
博客:https://blog.csdn.net/weixin_44504146

第三章: 微信小程序底部导航栏的实现(详细)相关推荐

微信小程序-底部导航栏
注册一个小程序appId,新建自己的项目,了解小程序的框架结构. 制作底部导航栏时,添加导航按钮关联页面,注意配置在app.json配置page时,要把第一个导航按钮页面放在第一个位,不然其他页面会覆 ...
自定义微信小程序底部导航栏
效果目录 1.在根目录创建custom-tab-bar文件夹 (1)index.js Component({data: {selected: 0,color: "#59595b" ...
php底部导航栏,关于微信小程序底部导航栏目的开发
这篇文章主要介绍了微信小程序底部导航栏目开发资料的相关资料,微信小程序底部想要有一个漂亮的导航栏目,不知道怎么制作,于是百度找到了本篇文章,分享给大家,需要的朋友可以参考下微信小程序底部导航栏目 ...
微信小程序底部导航Tabbar
1,底部导航栏这个功能是非常常见的一个功能,基本上一个完成的app,都会存在一个导航栏,那么微信小程序的导航栏该怎么实现呢?经过无数的踩坑,终于实现了,好了,先看看效果图. 2,对于底部导航栏,小程序 ...
小程序tabbar能放分包路径吗_微信小程序底部导航Tabbar
底部导航栏这个功能是非常常见的一个功能,基本上一个完成的app,都会存在一个导航栏,那么微信小程序的导航栏该怎么实现呢?经过无数的踩坑,终于实现了,好了,先看看效果图. 对于底部导航栏,小程序上给出的 ...
微信小程序自定义导航栏机型适配--底部Tabbar--view高度--底部按钮适配
自定义微信小程序头部导航栏自定义微信小程序头部导航栏,有几种方式方式一 {"navigationStyle": "custom" // 将navigatio ...
微信小程序底部导航---tabBar
微信小程序底部导航-tabBar 示例图如下: 在app,json页面pages配置中代码如下: "pages": ["pages/home/home",&q ...
微信小程序自定义导航栏组件
效果图首先要先在 json文件里加上 "navigationStyle":"custom", 这句,去掉原生的自定义导航栏一.子组件-wxml <vi ...
微信小程序头部导航栏自定义
微信小程序头部导航栏自定义参考网址微信开放文档 navigationStyle导航栏样式:仅支持以下值:default默认样式,custom 自定义导航栏,只保留右上角胶囊按钮配置示例 {&quo ...
微信小程序自定义导航栏（带汉堡包菜单）
微信小程序自定义导航栏(带汉堡包菜单) 1.在app.json中 window配置navigationStyle (如果单独页面使用,可在页面的json文件配置) 2.计算相关值整个导航栏的高度: ...

最新文章

热门文章