失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > 【微信小程序】全局样式 局部样式 全局配置

【微信小程序】全局样式 局部样式 全局配置

时间:2019-09-08 13:46:32

相关推荐

【微信小程序】全局样式 局部样式 全局配置

🐚作者简介:苏凉(专注于网络爬虫,数据分析,正在学习前端的路上)

🐳博客主页:苏凉.py的博客

🌐系列专栏:小程序开发基础教程

👑名言警句:海阔凭鱼跃,天高任鸟飞。

📰要是觉得博主文章写的不错的话,还望大家三连支持一下呀!!!

👉关注✨点赞👍收藏📂

文章目录

样式导入@import语法全局样式局部样式全局配置小程序的窗口组成部分全局配置--window开启下拉刷新设置上拉触底距离全局配置--tabBartarBar的6个组成部分tarBar节点的配置项每个tab项的配置项

样式导入

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

@import语法

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

实例:

在根目录下创建一个文件夹,在文件夹中创建一个wxss文件

在该wxss下写入样式,并在页面wxss文件中导入该样式。

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

全局样式

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

局部样式

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

注意:

当局部样式和全局样式冲突时,根据就近原则,局部样式会覆盖全局样式当局部样式的权重大于或等于全局样式的权重时,才会覆盖全局的样式

全局配置

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

pages

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

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

设置小程序底部的 tabBar效果style

是否启用新版的组件样式

小程序的窗口组成部分

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

全局配置–window

常用window配置属性

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

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

开启下拉刷新

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

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

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

设置背景色:

设置loading样式:

这里只能设置为darklight两个样式。

设置上拉触底距离

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

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

全局配置–tabBar

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

底部tabBar顶部 tabBar

注意:

tabBar中只能配置最少2个、最多5个tab页签。当渲染顶部 tabBar时,不显示 icon,只显示文本。

tarBar的6个组成部分

backgroundColor: tabBar的背景色

selectedlconPath:选中时的图片路径

borderStyle: tabBar 上边框的颜色

iconPath:未选中时的图片路径

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

color: tab 上文字的默认(未选中)颜色

tarBar节点的配置项

每个tab项的配置项

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

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

如果觉得《【微信小程序】全局样式 局部样式 全局配置》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。