MediaQueryObserver
MediaQueryObserver 对象,用于监听页面 media query 状态的变化,如界面的长宽是不是在某个指定的范围内。
方法
MediaQueryObserver.observe(Object descriptor, Function callback)
开始监听页面 media query 变化情况
参数
| 参数 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| descriptor | Object | 是 | media query 描述符 | |
| callback | Function | 是 | 监听 media query 状态变化的回调函数 |
Object descriptor
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| minWidth | Number | 是 | 页面最小宽度( px 为单位) | |
| maxWidth | Number | 是 | 页面最大宽度( px 为单位) | |
| width | Number | 是 | 页面宽度( px 为单位) | |
| minHeight | Number | 是 | 页面最小高度( px 为单位) | |
| maxHeight | Number | 是 | 页面最大高度( px 为单位) | |
| height | Number | 是 | 页面高度( px 为单位) | |
| orientation | String | 是 | 屏幕方向( landscape 或 portrait ) |
callback(Object res)
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| matches | Boolean | 是 | 页面的当前状态是否满足所指定的 media query |
MediaQueryObserver.disconnect()
停止监听。回调函数将不再触发
示例代码:
Page({
onLoad() {
const observer = this.createMediaQueryObserver()
observer.observe({
orientation: 'portrait'
}, ({matches}) => {
console.log('portrait:'+ matches);
})
}
})