[小程序]样式与配置

ViperL12024-01-22 17:59

一、外部样式导入

使用**@import** 加外部样式表的相对路径并以 **;**表示语句结束。

复制代码

@import "common.wxss";

二、全局样式和局部样式

全局样式位于app.wxss中，会作用于整个项目中所有页面中。

局部样式 位于对应的wxss文件中，仅作用于当前页面，当全局样式和局部样式发生冲突时，会根据就近原则使用局部样式覆盖全局样式

三、全局配置与局部配置

1.全局配置

全局配置位于app.json文件下，常用配置项如下：

pages：所有页面的存放路径

window：窗口外观

tabBar：底边栏的效果

style：是否启用新版组件样式

2.window配置

小程序页面从上到下分为三个部分：导航栏 (navigateBar)、背景 (background)和页面主体(wxml)，如下图所示

常见的window节点配置项如下：

|----------------------------|----------|----------------------------|
| navigateBarTitleText | String | 导航栏标题 |
| navigateBarBackgroundColor | HexColor | 导航栏背景色 |
| navigateBarTextStyle | String | 导航栏标题颜色(仅支持black或white) |
| backgroundColor | HexColor | 窗口背景色 |
| backgroundTextStyle | String | 下拉loading样式(仅支持dark/light) |
| enablePullDownRefresh | Bool | 是否开启全局下拉刷新 |
| onReachBottomDistance | Number | 上拉触底事件行程 |

3.tabBar

用于快速切换页面，类似于Panel。在小程序中分为顶部tabBar 和底部tabBar 。需要注意的是，如果设置了底部tabBar则不会显示对应的图标。

tabBar最少设置2个标签，至多设置5个标签,。tabBar由6个部分组成，如下图所示：

配置方式如下：

python 复制代码

  "tabBar": {
    "list": [{
      "pagePath": "pages/homepage/home",
      "text": "主页"
    },
    {
      "pagePath": "pages/index/index",
      "text": "索引"
    }]
  },