很快微信开发者平台

 找回密码
 注册
查看: 3015|回复: 17

[经验分享] 微信小程序如何设置底部导航

[复制链接]

79

主题

103

帖子

2516

积分

专家路上

积分
2516
 楼主| 发表于 2018-6-4 17:31:07 | 显示全部楼层 |阅读模式

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

我们先来看个效果图

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

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


1. 图标准备

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

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

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

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


2. 更改配置文件

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


  • "tabBar": {  
  •    "color": "#a9b7b7",  
  •    "selectedColor": "#11cd6e",  
  •    "borderStyle":"white",  
  •    "list": [{  
  •      "selectedIconPath": "images/111.png",  
  •      "iconPath": "images/11.png",  
  •      "pagePath": "pages/index/index",  
  •      "text": "首页"  
  •    }, {  
  •      "selectedIconPath": "images/221.png",  
  •      "iconPath": "images/22.png",  
  •      "pagePath": "pages/logs/logs",  
  •      "text": "日志"  
  •    }, {  
  •      "selectedIconPath": "images/331.png",  
  •      "iconPath": "images/33.png",  
  •      "pagePath": "pages/test/test",  
  •      "text": "开心测试"  
  •    }]  
  • },  



  • "tabBar": {  
  •    "color": "#a9b7b7",  
  •    "selectedColor": "#11cd6e",  
  •    "borderStyle":"white",  
  •    "list": [{  
  •      "selectedIconPath": "images/111.png",  
  •      "iconPath": "images/11.png",  
  •      "pagePath": "pages/index/index",  
  •      "text": "首页"  
  •    }, {  
  •      "selectedIconPath": "images/221.png",  
  •      "iconPath": "images/22.png",  
  •      "pagePath": "pages/logs/logs",  
  •      "text": "日志"  
  •    }, {  
  •      "selectedIconPath": "images/331.png",  
  •      "iconPath": "images/33.png",  
  •      "pagePath": "pages/test/test",  
  •      "text": "开心测试"  
  •    }]  
  • },  


解释一下 对应的属性信息

tabBar  指底部的 导航配置属性

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

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

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

list   导航配置数组

selectedIconPath 选中时 图标路径

iconPath 未选择时 图标路径

pagePath 页面访问地址

text  导航图标下方文字


如果要改变更详细的样式 请参看

https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#tabBar


好了,保存 编译  就可以看到上面的效果了。


微信小程序开发神器《微信小程序自动切片生成布局软件》,可以快速自动生成小程序前端布局和代码,还有免费的教程和技术支持。

功能如下:

1、切片功能:原来手写的这部分工作,可以用切片软件的方法来切。切好后,可以自动生成wxml,wcss,js文件。

2、文字识别功能:效果图上的文字可以通过自动文字识别识别出来,提高录入的速度,减轻工作量。

3、存档功能:设计好的切片文件可以存档,以便下次需要的时候拿来重新编辑。只要有切片文件在,换了程序也可以秀给和编辑。

有任何疑问欢迎随时联系我们!

Q  Q : 348961183

官方网址:http://www.ymznkf.com/new_view_559.htm

软件下载地址:http://www.ymznkf.com/new_view_559.htm


回复

使用道具 举报

1

主题

366

帖子

7503

积分

S1

积分
7503
发表于 2018-6-4 20:13:23 | 显示全部楼层
看看怎么样
回复

使用道具 举报

79

主题

103

帖子

2516

积分

专家路上

积分
2516
 楼主| 发表于 2018-6-26 17:43:27 | 显示全部楼层

可以    欢迎指导!
回复

使用道具 举报

0

主题

42

帖子

378

积分

新人求带

积分
378
发表于 2018-6-27 22:10:56 | 显示全部楼层
一切为了微币
回复

使用道具 举报

79

主题

103

帖子

2516

积分

专家路上

积分
2516
 楼主| 发表于 2018-6-28 08:56:50 | 显示全部楼层

以为为了让开发更便捷!
回复

使用道具 举报

0

主题

54

帖子

940

积分

略知一二

积分
940
发表于 2019-5-15 17:00:10 | 显示全部楼层
微信小程序如何设置底部导航
回复

使用道具 举报

0

主题

1327

帖子

1万

积分

S2

积分
15653
发表于 2019-5-18 10:32:23 | 显示全部楼层
6666666666666666666
回复

使用道具 举报

0

主题

1327

帖子

1万

积分

S2

积分
15653
发表于 2019-5-18 10:32:23 | 显示全部楼层
6666666666666666666
回复

使用道具 举报

0

主题

1327

帖子

1万

积分

S2

积分
15653
发表于 2019-6-1 11:40:10 | 显示全部楼层
6666666666666666666
回复

使用道具 举报

0

主题

1327

帖子

1万

积分

S2

积分
15653
发表于 2019-6-2 11:45:45 | 显示全部楼层
66666666666666666
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|Archiver|手机版|小黑屋|很快微信开发者平台 ( 京ICP备2021022608号 )

GMT+8, 2021-10-24 05:13 , Processed in 0.028726 second(s), 21 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表