1 Star 0 Fork 5.4K

ohos / docs

forked from OpenHarmony / docs 
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
js-apis-system-mediaquery.md 3.42 KB
一键复制 编辑 原始数据 按行查看 历史
luoying_ace 提交于 2023-01-20 14:58 . revise docs

@system.mediaquery (媒体查询)

提供根据不同媒体类型定义不同的样式。

说明:

  • 从API Version 7 开始,该接口不再维护,推荐使用新接口@ohos.mediaquery
  • 本模块首批接口从API version 3开始支持。后续版本的新增接口,采用上角标单独标记接口的起始版本。

导入模块

import mediaquery from '@system.mediaquery';

mediaquery.matchMedia

matchMedia(condition: string): MediaQueryList

根据媒体查询条件,创建MediaQueryList对象。

系统能力: SystemCapability.ArkUI.ArkUI.Full

参数:

参数名 类型 必填 说明
condition string 用于查询的条件。

返回值:

参数类型 说明
MediaQueryList 表示创建MediaQueryList对象的属性,详情见下表 MediaQueryList说明。

示例:

let mMediaQueryList = mediaquery.matchMedia('(max-width: 466)');    

MediaQueryEvent

定义MediaQuery事件。

系统能力: SystemCapability.ArkUI.ArkUI.Full

名称 类型 必填 说明
matches boolean 匹配结果。

MediaQueryList

定义MediaQuery列表信息。

属性

系统能力: 以下各项对应的系统能力均为SystemCapability.ArkUI.ArkUI.Full

名称 类型 必填 说明
media string 序列化媒体查询条件,该参数为只读。
matches boolean 匹配结果。

onchange

onchange?: (matches: boolean) => void

matches状态变化时的执行函数。

系统能力: SystemCapability.ArkUI.ArkUI.Full

参数:

参数名 类型 必填 说明
matches boolean matches状态变化时值。

MediaQueryList.addListener

addListener(callback: (event: MediaQueryEvent) => void): void

给MediaQueryList添加回调函数,回调函数应在onShow生命周期之前添加,即需要在onInit或onReady生命周期里添加。

系统能力: SystemCapability.ArkUI.ArkUI.Full

参数:

参数名 类型 必填 说明
callback (event: MediaQueryEvent) => void 匹配条件发生变化的响应函数。

示例:

function maxWidthMatch(e){
  if(e.matches){
    // do something
  }
}
mMediaQueryList.addListener(maxWidthMatch);

MediaQueryList.removeListener

removeListener(callback: (event: MediaQueryEvent) => void): void

移除MediaQueryList中的回调函数。

系统能力: SystemCapability.ArkUI.ArkUI.Full

参数:

参数名 类型 必填 说明
callback (event: MediaQueryEvent) => void) 匹配条件发生变化的响应函数。

示例:

function maxWidthMatch(e){
  if(e.matches){
    // do something
  }
}
mMediaQueryList.removeListener(maxWidthMatch);
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
1
https://gitee.com/yeyinglong/docs.git
git@gitee.com:yeyinglong/docs.git
yeyinglong
docs
docs
master

搜索帮助

344bd9b3 5694891 D2dac590 5694891