顶部导航栏和底部导航栏设置

在正式开发小程序的功能之前，首先需要确定小程序的主要框架。

创建几个需要底部导航栏切换的页面

我的小程序需要创建的页面是“首页”、“我想要”、“私信”、“我的”，“首页”已经存在于项目中，不需要重复创建。创建过程如下：

创建成功，不仅创建了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"}]}}

来源地址：https://blog.csdn.net/laodanqiu/article/details/131712021