顶部导航栏和底部导航栏设置
在正式开发小程序的功能之前，首先需要确定小程序的主要框架。
创建几个需要底部导航栏切换的页面
我的小程序需要创建的页面是“首页”、“我想要”、“私信”、“我的”，“首页”已经存在于项目中，不需要重复创建。创建过程如下：
创建成功，不仅创建了star.vue，Hbuilder还自动帮助创建了star文件夹
除此之外，还帮助我们在pages.json文件中进行了配置
同理，继续创建其他文件
使用阿里巴巴矢量图标库
官网：阿里巴巴矢量图标库
首先注册账号并登录，然后点击我的项目
创建一个新项目
搜索图标添加到项目中
将想要的图标添加到购物车中
查看购物车
将购物车的图标添加到项目中
下载项目的图标到本地
将下载的文件解压之后，把里面的.ttf文件拿出来
将ttf文件存储到项目的静态资源目录下面
在项目中使用
"tabBar": { "iconfontSrc": "static/icon/iconfont.ttf", "color": "#333", "selectedColor": "#2b92ff", "list": [ { "text": "首页", "pagePath": "pages/index/index", "iconfont": { "text": "\ue67e", "selectedText": "\ue67e" } },{ "text": "我想要", "pagePath": "pages/star/star" },{ "text": "消息", "pagePath": "pages/message/message" },{ "text": "我的", "pagePath": "pages/my/my" } ] }
运行到浏览器中，查看网页效果，图标正常
运行到小程序中，查看效果，非常伤心，并不能正常使用
虽然在tabBar中无法使用iconfont，但是在页面的其他地方还是可以使用的，请继续后面的操作
将复制的在线代码替换掉原有的代码，下图是替换前
下图是替换后
之后，在每个链接前面添加上https
最后在App.vue文件中引入iconfont.css
到这里已经大功告成了，可以使用了，想要使用哪个图标，先去复制图标的unicode，如下图
在页面中使用
显示成功
完成底部导航栏tabBar
非常遗憾，上面引入的iconfont没办法再tabBar中使用，只能先把图标下载下来，然后再引入了
将下载的图标文件放入到项目的静态文件下面
使用图标
"tabBar": { "color": "#333", "selectedColor": "#2b92ff", "list": [ { "text": "首页", "pagePath": "pages/index/index", "iconPath": "static/icon/tabBar/首页.png", "selectedIconPath": "static/icon/tabBar/首页.png" },{ "text": "我想要", "pagePath": "pages/star/star", "iconPath": "static/icon/tabBar/收藏.png", "selectedIconPath": "static/icon/tabBar/收藏.png" },{ "text": "消息", "pagePath": "pages/message/message", "iconPath": "static/icon/tabBar/消息.png", "selectedIconPath": "static/icon/tabBar/消息.png" },{ "text": "我的", "pagePath": "pages/my/my", "iconPath": "static/icon/tabBar/我的.png", "selectedIconPath": "static/icon/tabBar/我的.png" } ] }
- iconPath：未选中状态的图标
- selectedIconPath：选中之后的图标
我这边为了偷懒，未选中和选中状态都使用相同的图标，你们可以使用不同的图标。
设置页面顶部导航栏标题
- navigationBarTitleText：导航的标题
- enablePullDownRefresh：页面是否允许下拉刷新
样式优化
{ "easycom": { "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue" }, "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages { "path": "pages/index/index", "style": { "navigationBarTitleText": "首页", "enablePullDownRefresh": true, // 设置背景颜色 "navigationBarBackgroundColor": "#2b92ff", // 设置标题的颜色 "navigationBarTextStyle": "white" } }, { "path": "pages/star/star", "style": { "navigationBarTitleText": "我想要", "enablePullDownRefresh": true, "navigationBarBackgroundColor": "#2b92ff", "navigationBarTextStyle": "white" } }, { "path": "pages/my/my", "style": { "navigationBarTitleText": "我的", "enablePullDownRefresh": true, "navigationBarBackgroundColor": "#2b92ff", "navigationBarTextStyle": "white" } }, { "path": "pages/message/message", "style": { "navigationBarTitleText": "消息", "enablePullDownRefresh": true, "navigationBarBackgroundColor": "#2b92ff", "navigationBarTextStyle": "white" } } ], "globalStyle": { "navigationBarTextStyle": "black", "navigationBarTitleText": "uni-app", "navigationBarBackgroundColor": "#F8F8F8", "backgroundColor": "#F8F8F8" }, "uniIdRouter": {}, "tabBar": { "color": "#292929", "selectedColor": "#2b92ff", "backgroundColor": "#ffffff", "list": [{ "text": "首页", "pagePath": "pages/index/index", "iconPath": "static/icon/tabBar/首页.png", "selectedIconPath": "static/icon/tabBar/首页 (1).png" }, { "text": "我想要", "pagePath": "pages/star/star", "iconPath": "static/icon/tabBar/收藏.png", "selectedIconPath": "static/icon/tabBar/收藏 (1).png" }, { "text": "消息", "pagePath": "pages/message/message", "iconPath": "static/icon/tabBar/消息.png", "selectedIconPath": "static/icon/tabBar/消息 (1).png" }, { "text": "我的", "pagePath": "pages/my/my", "iconPath": "static/icon/tabBar/我的.png", "selectedIconPath": "static/icon/tabBar/我的 (1).png" }] } }
