uniapp 判断元素是否在当前可视区域及video在不可视区域停止播放

最新推荐文章于 2024-12-06 12:49:21 发布

结构体&

最新推荐文章于 2024-12-06 12:49:21 发布

阅读量9.7k

点赞数 2

分类专栏： uniapp 解决bug

本文链接：https://blog.youkuaiyun.com/LIXIAONA_1101/article/details/115370024

版权

解决bug 同时被 2 个专栏收录

16 篇文章

订阅专栏

uniapp

15 篇文章

订阅专栏

本文介绍如何在uniapp中判断元素是否在当前可视区域，并提供解决方案，当video滑出可视区域时自动停止播放。通过比较元素位置与屏幕可视高度，实现元素的显示状态判断。同时，针对scroll-view中的video，利用class标识视频唯一性，结合@scroll事件监听播放状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

判断元素是否在当前可视区域

//第一种情况向上滑动滑过顶部到不可见区域：元素距顶部距离+元素本身高度 <= 0

//第二种情况向下滑动滑过底部到不可见区域：元素距顶部距离 > 屏幕可视高度

获取元素节点信息：

user-avatar为元素class名

this.$u.getRect('.user-avatar').then(rect => {
							console.log(rect);
						})

屏幕可视高度获取： uni.getSystemInfoSync().windowHeight

元素本身高度：class.height

解决video在不可视区域停止播放

情景：scroll-view中itemType为video

那么也就是说这里video的class不是唯一的，那我们可以使用两个class来控制一个video,

第一个来控制video的样式第二个来标识单个video的唯一性

我这里使用的监听是scroll-view的@scroll（）

当然如果你不是在滚动组件中使用的话可使用onPageScroll参考链接

demo:

<video class="video-card" :class="'id'+data.id" :src="data.img" objectFit="cover" controls :id="'id'+data.id"
@play="videoPlayHandle('id'+data.id)">

onScroll() {
				var that = this;
				if (!that.$u.test.isEmpty(that.video)) {
					this.$u.getRect('.' + that.video.id).then(rect => {
						// console.log("元素距离"+JSON.stringify(rect));
						if (rect.top <= 0) {
							//第一种情况 向上滑动 滑过顶部到不可见区域
							console.log("向上滑动false");
							that.video.pause();
						} else if (rect.top > this.windowHeight) {
							//第二种情况 向下滑动 滑过底部到不可见区域
							console.log("向下滑动false");
							that.video.pause();
						} else {
							//可见区域
							console.log("true");
						}
					})
				}
			},