微信小程序］全局样式、本地样式、全局配置

样式导入

使用wxss提供的@import语法，可导入外联的样式表。

@import语法

@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

实例：

1. 在根目录下创建一个文件夹，在文件夹中创建一个wxss文件

2. 网络异常，图片无法展示

   |
3. 
   
4. 在该wxss下写入样式，并在页面wxss文件中导入该样式。

这样就可以将外联样式导入进来了。

全局样式

全局样式即app.wxss这个文件，这里面的样式会应用到全局。作用于每一个页面。

局部样式

在页面中的.wxss文件都属于局部样式，只作用于当前页面。

注意:

1. 当局部样式和全局样式冲突时，根据就近原则，局部样式会覆盖全局样式

2. 当局部样式的权重大于或等于全局样式的权重时，才会覆盖全局的样式

全局配置

小程序根目录下的app.json文件是小程序的全局配置文件。常用的配置项如下:

• pages

记录当前小程序所有页面的存放路径

• window

全局设置小程序窗口的外观

• tabBar

设置小程序底部的 tabBar效果

• style

是否启用新版的组件样式

小程序的窗口组成部分

window可配置小程序的导航栏区域和背景区域。

全局配置–window

常用window配置属性

在app.json文件中找到window进行配置。

如：修改导航栏的标题和背景颜色。

开启下拉刷新

下拉刷新是移动端的专有名词，指的是通过手指在屏幕上的下拉滑动操作，从而重新加载页面数据的行为。

在window全局配置下，将enablePullDownRefresh属性值改为true即可。

在app.json中开启下拉刷新后会作用于每一个页面。

设置背景色：

设置loading样式：

这里只能设置为dark和light两个样式。

设置上拉触底距离

上拉触底是移动端的专有名词，通过手指在屏幕上的上拉滑动操作，从而加载更多数据的行为。

默认距离为50px，如需重新设置，则在app.json文件中的window项进行配置。

全局配置–tabBar

tabBar是移动端应用常见的页面效果，用于实现多页面的快速切换。小程序中通常将其分为:

• 底部tabBar

• 顶部 tabBar

注意:

1. tabBar中只能配置最少2个、最多5个tab页签。

2. 当渲染顶部 tabBar时，不显示 icon，只显示文本。

tarBar的6个组成部分

backgroundColor: tabBar的背景色

selectedlconPath:选中时的图片路径

borderStyle: tabBar 上边框的颜色

iconPath:未选中时的图片路径

selectedColor : tab 上的文字选中时的颜色

color: tab 上文字的默认（未选中）颜色

tarBar节点的配置项

每个tab项的配置项

在app.json中添加于window平齐的tabBar配置项。

其中每隔tab项都有以下四个属性值。