【微信小程序】全局样式与局部样式(app.wxss)/全局配置(app.json)/小程序窗口组成/页面配置(index.json)

1.全局样式

定义在app.wxss中的样式称为全局样式,作用于每个页面

2.局部样式

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

*注意(谁权重大听谁的)

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

  2. 只有当局部央视的权重大于或等于全局样式时,才会覆盖全局的样式

全局配置

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

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

1.小程序Window窗口组成部分

image

2.了解window节点常用的配置项

image

3.开启全局下拉刷新功能

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

设置步骤: app.json -> window ->把 enablePullDownRefresh的值设置为true

注意:在app.json中启用下拉刷新功能,会作用于每个小程序页面!

4.设置下拉背景色

backgroundColor

5.设置下拉刷新时loading的样式

当全局开启下拉刷新功能之后,默认窗口的loading 样式为白色,如果要更改loading 样式的效果,设置步骤为 app.json -> window ->为backgroundTextStyle指定dark值。效果如下:

image

6.设置上拉触底的举例

概念:上拉触底是移动端的专有名词,通过手指在屏幕上的上拉滑动操作,从而加载更多数据的行为。设置步骤: app.json -> window ->为onReachBottomDistance设置新的数值

注意:默认距离为50px,如果没有特殊需求,建议使用默认值即可。

距离底部50像素时自动加载数据


tabBar

1.什么是tabBar

tabBar是移动端应用常见的页面效果,用于实现多页面的快速切换

小程序中通常将其分为:

  1. 顶部tabBar
  2. 底部tabBar

image

image

注意:

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

	当渲染==顶部 tabBar==时,==不显示icon==,只显示文本

2.tabBar的6个组成部分

image

3.tabBar节点的配置项

image

4.每个tab项的配置选项

image

tabBar的页面必须放pages配置的最前面

"pages":[
    "pages/list/list",
    "pages/index/index"
  ],
"tabBar": {
    "backgroundColor": "#fff",
    "borderStyle": "black",
    "color": "#000000",
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "./images/index.png",
      "selectedIconPath": "./images/index-action.png"
    },{
      "pagePath": "pages/list/list",
      "text": "菜单",
      "iconPath": "./images/menu.png",
      "selectedIconPath": "./images/menu-action.png"

    }]
  },

image

页面配置

1.页面配置文件的作用

小程序中,每个页面都有自己的.json配置文件,用来对当前页面的窗口外观、页面效果等进行配置。

2.页面配置文件全局配置文件的关系

如果某些小程序页面想要拥有特殊的窗口表现,此时,“页面级别的.json配置文件”就可以实现这种需求。

注意*:当页面配置与全局配置冲突时,根据就近原则,最终效果以页面配置为主

3.页面配置中常用的配置项

image

posted @ 2022-04-08 16:14  一个大不刘blog  阅读(915)  评论(0编辑  收藏  举报