素材下载网站开发,网站导航栏字体,手机制作表格,模板设计应考虑哪些荷载步骤#xff1a;
1、创建对象实例
2、获取/指定界面上的节点信息
3、判断节点是否在当前屏幕可视区域 微信API提供了两种获取创建对象实例和获取节点的方法#xff0c;按照以上步骤#xff0c;我们一一来看#xff1a;
1、wx.createSelectorQuery() wx.createSelectorQ…步骤
1、创建对象实例
2、获取/指定界面上的节点信息
3、判断节点是否在当前屏幕可视区域 微信API提供了两种获取创建对象实例和获取节点的方法按照以上步骤我们一一来看
1、wx.createSelectorQuery() wx.createSelectorQuery() 返回一个 SelectorQuery 对象实例。在自定义组件或包含自定义组件的页面中应使用 this.createSelectorQuery() 来代替。 SelectorQuery.select(string selector) 在当前页面下选择第一个匹配选择器 selector 的节点。返回一个 NodesRef 对象实例可以用于获取节点信息。 NodesRef.boundingClientRect(function callback) 添加节点的布局位置的查询请求。相对于显示区域以像素为单位。其功能类似于 DOM 的 getBoundingClientRect。返回 NodesRef 对应的 SelectorQuery。 SelectorQuery.exec(function callback) 执行所有的请求。请求结果按请求次序构成数组在callback的第一个参数中返回。 将以上方法联系起来即可得到既定节点此时的宽高、上下左右位置
const query wx.createSelectorQuery()
query.select(#the-id).boundingClientRect()
query.exec(function(res){res[0].top // #the-id节点的上边界坐标res[0].bottom // #the-id节点的下边界坐标res[0].left // #the-id节点的左边界坐标res[0].right // #the-id节点的右边界坐标res[0].width // #the-id节点的宽度res[0].height // #the-id节点的高度
})
2、wx.createIntersectionObserver wx.createIntersectionObserver(Object component, Object options) 创建并返回一个 IntersectionObserver 对象实例。在自定义组件或包含自定义组件的页面中应使用 this.createIntersectionObserver([options]) 来代替。 IntersectionObserver.observe(string targetSelector, function callback) 指定目标节点并开始监听相交状态变化情况 IntersectionObserver.relativeToViewport(Object margins) 指定页面显示区域作为参照区域之一 wx.createIntersectionObserver().relativeToViewport().observe(.target-class, (res) {res.intersectionRatio // 相交区域占目标节点的布局区域的比例res.intersectionRect // 相交区域res.intersectionRect.left // 相交区域的左边界坐标res.intersectionRect.top // 相交区域的上边界坐标res.intersectionRect.width // 相交区域的宽度res.intersectionRect.height // 相交区域的高度
}) ⚠️在组件中使用以上方法创建实例时用this.xxx代替wx.xxx或者使xxx.in(this) SelectorQuery.in(Component component) 将选择器的选取范围更改为自定义组件 component 内。初始时选择器仅选取页面范围的节点不会选取任何自定义组件中的节点。 const query wx.createSelectorQuery().in(this); 示例
视频在可视区域内播放离开后暂停播放
const query wx.createSelectorQuery();
query.select(#myVideo).boundingClientRect((rect) {//手动暂停之后不继续播放if(this.data.clickPause) return//不在区域的screenHeight-屏幕高度if (rect.top 0 || rect.bottom this.screenHeight) {this.$video.pause();} else {this.$video.play();}}).exec();
wx.createIntersectionObserver().relativeToViewport().observe(#myVideo, (res) {//手动暂停之后不继续播放if(this.data.clickPause) return// 相交区域占目标节点的布局区域的比例大于0根据业务自行设置if (res.intersectionRatio 0) {this.$video.play();} else {console.log(下滑页面)this.$video.pause();}});
