WXSS模板样式-rpxrpx导航栏标题颜色导

WXSS 模板样式 WXSS 模板样式 - rpx

rpx( ) 是微信小程序独有的，用于解决屏幕适配的尺寸单位

实施原则'

针对不同设备的屏幕尺寸不同，为了实现屏幕的自动适配，rpx将所有社保屏幕分成7500等宽（即当前屏幕的总宽度为 ）

小程序 · 在不同设备上运行时，会自动将 rpx 的样式单位转换为对应的像素单位 px 进行渲染，从而实现屏幕适配

WXSS 模板样式 - 样式导入

可以使用 wxss 提供的 @ 语法导入外部样式表

@ 的语法

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

@import "commm.wxss" ;

WXSS 模板样式 - 全局样式和局部样式 全局样式

app.wxss 中定义的样式被用作每个界面的全局样式

常用配置项：记录当前小程序所有页面的存储路径。全局设置小程序窗口的外观。设置小程序的效果是否启用新版本的组件样式。全局配置 - 小程序窗口的一部分

了解节点常用配置项属性名称类型的默认值描述

xt

细绳

导航栏标题文字内容

#

导航栏背景颜色

乐

导航栏标题颜色，仅支持 /

#

窗口的背景颜色

黑暗的

下拉样式，仅支持深色/

H

是否全局开启下拉刷新

e

50

页面底部上拉时到页面底部的距离微信小程序开发导航栏样式，单位为px

全局配置 -

是移动应用中常见的页面效果，用于实现多页面的快速切换。

小程序通常分为：

: 背景颜色 : 选中时的图片路径 3.: 上边框颜色: 未选中时的图片路径: 选项卡上的文本 选中时的颜色: 选项卡上文本的默认（未选中）颜色

节点的配置项属性类型 必填 默认值 描述

不

位置，仅支持 /top

不

上边框的颜色，只支持/

不

选项卡上文本的默认（未选中）颜色

不

选项卡上所选文本的颜色

不

背景颜色

列表

是的

选项卡列表，最少 2 个，最多 5 个

每个选项卡项的配置选项

属性类型 必填 默认值 描述

是的

页面路径，页面必须在

文本

是的

选项卡上显示的文本

不

未选中时的图标路径；当它在顶部时，图标不显示

不

选中时的图标路径；当它在顶部时，图标不显示

简单配置

在项目的统计目录下创建一个文件夹，存放你需要的图片资源

由于无法通过编译器直接创建同级目录，所以可以右键打开资源管理器，直接创建文件夹。我们需要的图片资源分为点击前和点击后。建议在阿里巴巴矢量图标库中下载两种颜色。png，便于管理，命名有意义（可以自己区分）在app.json文件中，创建你需要的分页，分页是为对应的选择

"pages": [ "pages/index/index", "pages/shangcheng/shangcheng", "pages/wode/wode" ],

创建一个同级别的标签“”，并使用上面的表格属性创建它

"tabBar":{ "list":[ { "pagePath":"pages/index/index", "text":"首页", "iconPath": "images/shouye.png", "selectedIconPath": "images/shouye1.png" }, { "pagePath":"pages/shangcheng/shangcheng", "text":"商城", "iconPath": "images/shangcheng.png", "selectedIconPath": "images/shangcheng1.png" }, { "pagePath": "pages/wode/wode" , "text": "我的", "iconPath": "images/wode.png", "selectedIconPath": "images/wode1.png" } ] },

以上就是所有步骤，下面的gif是实际效果，内容是之前的填充，没有删

地方风格

页面的.wxss文件中定义的样式是本地样式，只适用于当前页面

注意：

当局部样式与全局样式冲突时，局部样式会根据邻近原则覆盖全局样式。

当局部样式的权重大于等于全局样式的权重时，全局样式将被覆盖

页面配置与全局配置的关系

小程序中app.json中的节点可以全局配置小程序中各个页面的窗口性能。

如果一些小程序页面想要有特殊的窗口性能，此时“页面级.json配置要价”就可以达到这个要求。

注意：当页面配置与全局配置冲突时，根据就近原则，最终效果以页面配置为准。

页面配置中的常用配置项

与全局配置相同