diff --git a/docs/api/_sidebar.md b/docs/api/_sidebar.md index 6050732b5e342223382382cd07c5976940d9b419..63a667f03d47ac8b12ef1a92db7da4542103879b 100644 --- a/docs/api/_sidebar.md +++ b/docs/api/_sidebar.md @@ -85,6 +85,7 @@ * [下拉刷新](api/ui/pulldown.md) * [节点信息](api/ui/nodes-info.md) * [节点布局相交状态](api/ui/intersection-observer.md) + * [媒体查询](api/ui/media-query-observer.md) * [自定义组件](api/ui/nextTick.md) * [菜单](api/ui/menuButton.md) * 页面和窗体 diff --git a/docs/api/ui/media-query-observer.md b/docs/api/ui/media-query-observer.md index 8a38859aa93446df86694059efe9723ee728b7e3..2ea72c9967abad7f43fd07512030a33e6cc56164 100644 --- a/docs/api/ui/media-query-observer.md +++ b/docs/api/ui/media-query-observer.md @@ -3,22 +3,24 @@ MediaQueryObserver 对象,用于监听页面 media query 状态的变化,如 ### uni.createMediaQueryObserver([this]) 创建并返回一个 ``MediaQueryObserver`` 对象实例。 +> 从 HbuilderX 2.8.12 版本开始支持 + **this说明:** -自定义组件实例。**支付宝小程序不支持此参数,传入仅为抹平写法差异** +自定义组件实例。**小程序端不支持此参数,传入仅为抹平写法差异** ### MediaQueryObserver 对象的方法列表 -|方法|说明| -|:-|:-| -|MediaQueryObserver.observe(Object descriptor, function callback)|开始监听页面 media query 变化情况| -|MediaQueryObserver.disconnect()|停止监听,回调函数将不再触发| +|方法|说明|平台差异| +|:-|:-|:-| +|MediaQueryObserver.observe(Object descriptor, function callback)|开始监听页面 media query 变化情况|小程序非微信端,只查询一次,不支持监听| +|MediaQueryObserver.disconnect()|停止监听,回调函数将不再触发|| **observe 回调函数包含一个参数** -||类型|说明| +|参数|类型|说明| |:-|:-|:-| -|intersectionRatio|boolean|页面的当前状态是否满足所指定的 media query| +|matches|boolean|页面的当前状态是否满足所指定的 media query| ### 代码示例 @@ -75,7 +77,6 @@ MediaQueryObserver 对象,用于监听页面 media query 状态的变化,如 console.log('######### matches #########', matches) this.matches = matches; }) - console.log('########## create mediaQueryOb ###########', this.mediaQueryOb) }, landscapeObserver() { // console.log('--------- this----------', this) @@ -90,7 +91,6 @@ MediaQueryObserver 对象,用于监听页面 media query 状态的变化,如 remove() { this.mediaQueryOb.disconnect() landscapeObs.disconnect() - console.log('########## destroy mediaQueryOb ###########', this.mediaQueryOb) } } } diff --git a/docs/component/_sidebar.md b/docs/component/_sidebar.md index 550ea35fb68917a4a03728baf3a3651c25214023..567cc5f0f2092f85f8e1bbccb42fd13b86d43f0d 100644 --- a/docs/component/_sidebar.md +++ b/docs/component/_sidebar.md @@ -2,6 +2,7 @@ * [view](component/view.md) * [scroll-view](component/scroll-view.md) * [swiper](component/swiper.md) + * [match-media](component/match-media.md) * [movable-area](component/movable-view.md?id=movable-area) * [movable-view](component/movable-view.md?id=movable-view) * [cover-view](/component/cover-view?id=cover-view) diff --git a/docs/component/match-media.md b/docs/component/match-media.md index 9bb2d6d110b5229081bab85d5c584d2029730cd5..757f2488214cd3b458205c7a8b83124e01eea8b3 100644 --- a/docs/component/match-media.md +++ b/docs/component/match-media.md @@ -5,17 +5,21 @@ media query 匹配检测节点。 可以指定一组 media query 规则,满足时,这个节点才会被展示。 通过这个节点可以实现“页面宽高在某个范围时才展示某个区域”这样的效果。 +> 从 HbuilderX 2.8.12 版本开始支持 + **属性说明** -|属性名|类型|默认值|必填|说明|平台差异说明| -|:-|:-|:-|:-|:-|:-| -|min-width|number||否|页面最小宽度( px 为单位)|| -|max-width|number||否|页面最大宽度( px 为单位)|| -|width|number||否|页面宽度( px 为单位)|| -|min-height|number||否|页面最小高度( px 为单位)|| -|max-height|number||否|页面最大高度( px 为单位)|| -|height|number||否|页面高度( px 为单位)|| -|orientation|string||否|屏幕方向( landscape 或 portrait )|| +|属性名|类型|默认值|必填|说明| +|:-|:-|:-|:-|:-| +|min-width|number||否|页面最小宽度( px 为单位)| +|max-width|number||否|页面最大宽度( px 为单位)| +|width|number||否|页面宽度( px 为单位)| +|min-height|number||否|页面最小高度( px 为单位)| +|max-height|number||否|页面最大高度( px 为单位)| +|height|number||否|页面高度( px 为单位)| +|orientation|string||否|屏幕方向( landscape 或 portrait )| + +> 平台差异说明: 小程序非微信端,不支持屏幕动态改变 **match-media 示例**