uniapp项目-配置pages.json

最新推荐文章于 2025-08-24 08:15:00 发布

原创最新推荐文章于 2025-08-24 08:15:00 发布 · 949 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #vue.js #前端

uni-app 专栏收录该内容

2 篇文章

订阅专栏

文章详细介绍了如何在微信小程序中配置tabBar的选中颜色、底部导航栏的各个选项（包括页面路径、文本和图标），以及如何设置分包、全局样式和单个页面的样式，如导航栏标题、背景等。

1.配置tabBar

说明：selectedcolor是选中的颜色；lists底部导航栏的每个导航项的列表，

"pagePath"：导航项关联的页面路径。
"text"：导航项显示的文本内容。
"iconPath"：导航项默认状态下的图标路径。
"selectedIconPath"：导航项选中状态下的图标路径。

    "tabBar" : {
        "selectedColor" : "#C00000",
        "list" : [
            {
                "pagePath" : "pages/home/home",
                "text" : "首页",
                "iconPath" : "static/tab_icons/home.png",
                "selectedIconPath" : "static/tab_icons/home-active.png"
            },
            {
                "pagePath" : "pages/cate/cate",
                "text" : "分类",
                "iconPath" : "static/tab_icons/cate.png",
                "selectedIconPath" : "static/tab_icons/cate-active.png"
            },
            {
                "pagePath" : "pages/cart/cart",
                "text" : "购物车",
                "iconPath" : "static/tab_icons/cart.png",
                "selectedIconPath" : "static/tab_icons/cart-active.png"
            },
            {
                "pagePath" : "pages/my/my",
                "text" : "我的",
                "iconPath" : "static/tab_icons/my.png",
                "selectedIconPath" : "static/tab_icons/my-active.png"
            }
        ]
    },

2.配置分包

说明：

"subPackages"：子包的配置列表。
"root"：子包的根目录，表示该子包的页面都位于此目录下。
"pages"：子包中的页面列表。

    "subPackages" : [
        {
            "root" : "subpkg",
            "pages" : [
                {
                    "path" : "goods-detail/goods-detail",
                    "style" : {
                        "navigationBarTitleText" : "",
                        "enablePullDownRefresh" : false
                    }
                },
                {
                    "path" : "goods_list/goods_list",
                    "style" : {
                        "navigationBarTitleText" : "",
                        "enablePullDownRefresh" : true,
                        "onReachBottomDistance": 150,
                        "backgroundColor": "#F8F8F8"
                    }
                },
                {
                    "path" : "search/search",
                    "style" : {
                        "navigationBarTitleText" : "",
                        "enablePullDownRefresh" : false
                    }
                }
            ]
        }
    ],

3.配置全局样式

说明：

"navigationBarTextStyle"：导航栏标题的文字颜色。
"navigationBarTitleText"：导航栏标题的文字内容。
"navigationBarBackgroundColor"：导航栏的背景色。
"backgroundColor"：页面的默认背景色。

    "globalStyle" : {
        "navigationBarTextStyle" : "white",
        "navigationBarTitleText" : "FOREVER",
        "navigationBarBackgroundColor" : "#C00000",
        "backgroundColor" : "#F8F8F8",
        "app-plus" : {
            "background" : "#efeff4"
        }
    },

4.配置page

说明：

"pages"：页面的配置列表。
"path"：页面的路径，用于指定页面所对应的文件位置。
"style"：页面的样式配置，用于定义每个页面的特定样式。

    "pages" : [
      {
          "path" : "pages/home/home",
          "style" : {
              "navigationBarTitleText" : "",
              "enablePullDownRefresh" : false
          }
      },
        {
            "path" : "pages/cate/cate",
            "style" : {
                "navigationBarTitleText" : "",
                "enablePullDownRefresh" : false
            }
        },
        {
            "path" : "pages/cart/cart",
            "style" : {
                "navigationBarTitleText" : "",
                "enablePullDownRefresh" : false
            }
        },
        {
            "path" : "pages/my/my",
            "style" : {
                "navigationBarTitleText" : "",
                "enablePullDownRefresh" : false
            }
        }
    ],