🐚作者简介:苏凉(专注于网络爬虫,数据分析,正在学习前端的路上)
🐳博客主页:苏凉.py的博客
🌐系列专栏:小程序开发基础教程
👑名言警句:海阔凭鱼跃,天高任鸟飞。
📰要是觉得博主文章写的不错的话,还望大家三连支持一下呀!!!
👉关注✨点赞👍收藏📂

样式导入

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

@import语法

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

实例:

  1. 在根目录下创建一个文件夹,在文件夹中创建一个wxss文件
    在这里插入图片描述
  2. 在该wxss下写入样式,并在页面wxss文件中导入该样式。
    在这里插入图片描述
    这样就可以将外联样式导入进来了。
    在这里插入图片描述

全局样式

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

在这里插入图片描述

局部样式

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

注意:

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

全局配置

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

  • pages
    记录当前小程序所有页面的存放路径
  • window
    全局设置小程序窗口的外观
  • tabBar
    设置小程序底部的 tabBar效果
  • style
    是否启用新版的组件样式

小程序的窗口组成部分

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

在这里插入图片描述

全局配置–window

常用window配置属性

属性名类型默认值说明
navigationBarTitleTextString字符串导航栏标题文字内容
navigationBarBackgroundColorHexcolor#000000导航栏背景颜色,如#000000
navigationBarTextStyleStringwhite导航栏标题颜色,仅支持black / white
backgroundColorHexcolor#ffffff窗口的背景色
backgroundTextStylestringdark下拉 loading的样式,仅支持dark / light
enablePullDownRefreshBooleanfalse是否全局开启下拉刷新
onReachBottomDistanceNumber50页面上拉触底事件触发时距页面底部距离,单位为px

app.json文件中找到window进行配置。
如:修改导航栏的标题和背景颜色。

在这里插入图片描述

开启下拉刷新

下拉刷新是移动端的专有名词,指的是通过手指在屏幕上的下拉滑动操作,从而重新加载页面数据的行为。
在window全局配置下,将enablePullDownRefresh属性值改为true即可。

在这里插入图片描述

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

设置背景色:
在这里插入图片描述

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

在这里插入图片描述

设置上拉触底距离

上拉触底是移动端的专有名词,通过手指在屏幕上的上拉滑动操作,从而加载更多数据的行为。
默认距离为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节点的配置项

属性类型必填默认值描述
positionStringbottomtabBar的位置,仅支持bottom/top
borderStyleStringblacktabBar上边框的颜色,仅支持black/white
colorHexColortab 上文字的默认(未选中)颜色
selectedColorHexColortab 上的文字选中时的颜色
backgroundColorHexColortabBar的背景色
listArray最少2个、最多5个tabtab页签的列表。

每个tab项的配置项

在app.json中添加于window平齐的tabBar配置项。
其中每隔tab项都有以下四个属性值。

属性类型必填描述
pagePathString页面路径,页面必须在pages中预先定义
textStringtab上显示的文字
iconPathString未选中时的图标路径;当postion 为top时,不显示 icon
selectedlconPathString选中时的图标路径;当postion 为top时,不显示 icon

在这里插入图片描述

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐