From ff5588a230b40c909fd06e08c1eb122e80ff4b77 Mon Sep 17 00:00:00 2001 From: tianjiaxing Date: Wed, 2 Sep 2020 21:36:59 +0800 Subject: [PATCH] update docs --- docs/api/ui/mediaQuery-observer.md | 134 ----------------------------- 1 file changed, 134 deletions(-) delete mode 100644 docs/api/ui/mediaQuery-observer.md diff --git a/docs/api/ui/mediaQuery-observer.md b/docs/api/ui/mediaQuery-observer.md deleted file mode 100644 index eb23a6eb6..000000000 --- a/docs/api/ui/mediaQuery-observer.md +++ /dev/null @@ -1,134 +0,0 @@ -节点布局交叉状态 API 可用于监听两个或多个组件节点在布局位置上的相交状态。这一组API常常可以用于推断某些节点是否可以被用户看见、有多大比例可以被用户看见。 - -### uni.createIntersectionObserver([this], [options]) -创建并返回一个 ``IntersectionObserver`` 对象实例。 - -**this说明：** - -自定义组件实例。**支付宝小程序不支持此参数，传入仅为抹平写法差异** - -**options 的可选参数为：** - -|字段名|类型|说明| -|:-|:-|:-| -|thresholds|Array|一个数值数组，包含所有阈值。默认为 ``[0]``。| -|initialRatio|Number|初始的相交比例，如果调用时检测到的相交比例与这个值不相等且达到阈值，则会触发一次监听器的回调函数。默认为 ``0``。| -|observeAll|Boolean|是否同时观测多个参照节点（而非一个），如果设为 ``true``，``observe`` 的 ``targetSelector`` 将选中多个节点（注意：同时选中过多节点将影响渲染性能）| - -### IntersectionObserver 对象的方法列表 - -|方法|说明| -|:-|:-| -|IntersectionObserver.relativeTo(selector,[margins])|使用选择器指定一个节点，作为参照区域之一。| -|IntersectionObserver.relativeToViewport([margins])|指定页面显示区域作为参照区域之一| -|IntersectionObserver.observe(selector,[callback])|指定目标节点并开始监听相交状态变化情况。回调函数 ``callback`` 包含一个参数 ``result``| -|IntersectionObserver.disconnect()|停止监听。回调函数将不再触发。| - -**margins 参数：** 用来扩展（或收缩）参照节点布局区域的边界。 - -|属性|类型|默认值|是否必填|说明| -|:-|:-|:-|:-|:-| -|left|number||否|节点布局区域的左边界| -|right|number||否|节点布局区域的右边界| -|top|number||否|节点布局区域的上边界| -|bottom|number||否|节点布局区域的下边界| - -下面的示例代码中，如果目标节点 ``".test"`` 进入 ``".scroll"`` 区域以下 100px 时，就会触发回调函数。 -``` -uni.createIntersectionObserver(this).relativeTo('.scroll',{bottom: 100}).observe('.test', (res) => { - console.log(res); -}) -``` - -**observe 回调函数 result 包含的字段** - -|字段名|类型|说明| -|:-|:-|:-| -|intersectionRatio|Number|相交比例| -|intersectionRect|Object|相交区域的边界，包含 ``left``、``right``、``top``、``bottom`` 四项| -|boundingClientRect|Object|目标节点布局区域的边界，包含 ``left``、``right``、``top``、``bottom`` 四项| -|relativeRect|Object|参照区域的边界，包含 ``left``、``right``、``top``、``bottom`` 四项| -|time|Number|相交检测时的时间戳| - - -**Tips** - -- 与页面显示区域的相交区域并不准确代表用户可见的区域，因为参与计算的区域是“布局区域”，布局区域可能会在绘制时被其他节点裁剪隐藏（如祖先节点中 overflow 样式为 hidden 的节点）或遮盖（如 fixed 定位的节点）。 -- 节点交互状态 ``API`` 建议在 ``onReady`` 生命周期里监听，因为此 ``API`` 需要查找页面元素，``onReady`` 时页面已经完成初次渲染，已经能查找到对应的元素。 - -### 代码示例 - -``` - - - - -``` -- GitLab