uni-app切片工具（小程序切片）是一款根据效果图像画画一样来设计uni-app小程序，自动生成导出前端页面的快速开发工具。可以很方便、快速地生成小程序的wxml,wcss,js文件。可以大大提高您的工作效率，减少前端布局的编写工作。
下面讲解如何进行小程序的底部导航方法：
好了 小程序的头部标题 设置好了，我们来说说底部导航栏是如何实现的。
我们先来看个效果图
这里，我们添加了三个导航图标，因为我们有三个页面，uni-app小程序最多能加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",