ToB企服应用市场:ToB评测及商务社交产业平台

标题: uniapp开发微信小程序笔记3-全局配置、导航栏配置、tabBar配置 [打印本页]

---

作者: 丝    时间: 2024-11-19 19:59
标题: uniapp开发微信小程序笔记3-全局配置、导航栏配置、tabBar配置
媒介：

本文记录的是微信小程序的全局配置、导航栏配置、tabBar配置
一、全局配置：

可以直接查官方文档：pages.json 页面路由 | uni-app官网，有非常详细的文档说明

都是在 pages.json里面做配置的，我们可以看到已经有一些配置了

 简单写了一下每句注释：

1. "globalStyle": {
2.         "navigationBarTextStyle": "black",//顶部导航栏文字颜色，只支持black、white
3.                 "navigationBarTitleText": "uni-app",//全局配置顶部导航栏文字
4.                 "navigationBarBackgroundColor": "#F8F8F8",
5.         //顶部导航栏背景色，只能写16进制，英文单词或rgb会报错
6.                 "backgroundColor": "#F8F8F8",//下拉背景色
7.         "enablePullDownRefresh":true//开启下拉刷新
8.         },       
9.        

复制代码

留意：

1、已经配置了"navigationBarTitleText": "uni-app"全局配置顶部导航栏文字，但是为什么我的分类页没有显示顶部导航栏的文字呢？

这是因为尚有局部的配置 将导航栏文字设置成了空字符串：

2、只设置了backgroundColor之后发现不能下拉，是因为没有设置enablePullDownRefresh，enablePullDownRefresh默认值为false，设置之后结果如下：

二、局部配置

1、局部配置和全局配置的内容差不多，可以参考官方文档，差别就是要写在pages的style里面

2、需要留意的是，局部配置会覆盖全局配置

三、tabBar配置

1、部分常用配置：

1. "tabBar": {
2.                 "selectedColor": "#ff5500", //tab 上的文字选中时的颜色
3.                 "list": [{
4.                         "pagePath": "pages/home/home", //页面路径
5.                         "text": "主页", //tab 上按钮文字
6.                         "iconPath": "static/tabBarIcon/home.png", //图片路径
7.                         "selectedIconPath": "static/tabBarIcon/home_selected.png" //选中时的图片路径
8.                 }, {
9.                         "pagePath": "pages/categorty/categorty",
10.                         "text": "分类",
11.                         "iconPath": "static/tabBarIcon/category.png",
12.                         "selectedIconPath": "static/tabBarIcon/category_selected.png"
13.                 }, {
14.                         "pagePath": "pages/mine/mine",
15.                         "text": "个人",
16.                         "iconPath": "static/tabBarIcon/mine_line.png",
17.                         "selectedIconPath": "static/tabBarIcon/mine_line_selected.png"
18.                 }]
19.         },

复制代码

 2、展示结果：

3、官网上对每个属性都有说明：

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4