[小程序]样式与配置

本文介绍: 常用的小程序全局布局

一、外部样式导入

使用@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个部分组成，如下图所示：

配置方式如下：

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