• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序设置底部导航栏目方法

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

微信小程序底部想要有一个漂亮的导航栏目,不知道怎么制作,于是百度找到了本篇文章,分享给大家。

好了 小程序的头部标题 设置好了,我们来说说底部导航栏是如何实现的。

我们先来看个效果图

这里,我们添加了三个导航图标,因为我们有三个页面,微信小程序最多能加5个。

那他们是怎么出现怎么着色的呢?两步就搞定!

 

1. 图标准备

阿里图标库  http://www.iconfont.cn/collections/show/29

我们进入该网站,鼠标滑到一个喜欢的图标上面  点击下方的 下载按钮

在弹出框中 选择了 俩个不同颜色的 图标  选择64px大小即可,我选择的是png  然后下载下来 起上别名 

将上述起好名字的图标 保存到 小程序 项目目录中 新创建的 images 文件夹中,准备工作就做好了

 

2. 更改配置文件

我们找到项目根目录中的配置文件 app.json 加入如下配置信息

 

[html] view plain copy
 
  1. "tabBar": {  
  2.    "color": "#a9b7b7",  
  3.    "selectedColor": "#11cd6e",  
  4.    "borderStyle":"white",  
  5.    "list": [{  
  6.      "selectedIconPath": "images/111.png",  
  7.      "iconPath": "images/11.png",  
  8.      "pagePath": "pages/index/index",  
  9.      "text": "首页"  
  10.    }, {  
  11.      "selectedIconPath": "images/221.png",  
  12.      "iconPath": "images/22.png",  
  13.      "pagePath": "pages/logs/logs",  
  14.      "text": "日志"  
  15.    }, {  
  16.      "selectedIconPath": "images/331.png",  
  17.      "iconPath": "images/33.png",  
  18.      "pagePath": "pages/test/test",  
  19.      "text": "开心测试"  
  20.    }]  
  21.  },  


解释一下 对应的属性信息

 

 

tabBar  指底部的 导航配置属性

color  未选择时 底部导航文字的颜色

selectedColor  选择时 底部导航文字的颜色

borderStyle  底部导航边框的样色(注意 这里如果没有写入样式 会导致 导航框上边框会出现默认的浅灰色线条)

list   导航配置数组

selectedIconPath 选中时 图标路径

iconPath 未选择时 图标路径

pagePath 页面访问地址

text  导航图标下方文字


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
一学就会微信小程序(一)——注册并进入微信小程序发布时间:2022-07-18
下一篇:
小程序同步缓存和异步缓存的区别发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap