uniapp鼠标滑动和video暂停

小编在使用swiper进行页面滑块布局时,主页移动到其他页面后,主页面的视频仍旧继续播放(虽然看不见但是有声音),于是想通过判断屏幕是否下滑(因为视频是在首页)来暂停视频。

当然还有其他更好的方法,欢迎大神来指教。

进入正题————
鼠标按下、弹起后触发,文本标签内填写
@touchstart=“start”
@touchend=“move”
为了防止看不懂附图

在这里插入图片描述

data中定义数据
startData:{
clientX:0,
clientY:0
}
这里就不加图了,不知道写哪在里说明学的太渣了

下面是写在methods中的方法
按下屏幕(手指或者鼠标)触发start:获取x、y坐标
结束滑动触发move:获取鼠标或者手指在屏幕上最后的坐标,然后进行判断

start(e){
				this.startData.clientX=e.changedTouches[0].clientX;
				this.startData.clientY=e.changedTouches[0].clientY;
},
move(e){
	const subX=e.changedTouches[0].clientX-this.startData.clientX;
	const subY=e.changedTouches[0].clientY - this.startData.clientY;
	if(subY<-50){
		console.log('下滑')
	}else{
		if(subX>50){
			console.log('右滑')
		}else if(subX<-50){
			console.log('左滑')
		}else{
			console.log('无效')
		}
	}
}

这里的if判断是一层一层下去的,如果乱滑一通,那就看初始坐标和结束坐标的位置关系,根据if判断的顺序来看(比如右滑再下滑,在我这就算是下滑)
我这里没有判断上划,相信广大网友应该是能举一反三弄出来

下面就是暂停视频了,只看滑动可以溜了
在这里插入图片描述

1.video中确定id,上图中已经有id了。
2.data中定义videoContext(自己定义的名字)。
在这里插入图片描述
3.js中绑定、使用(我是在move中的判断是否下滑的if里面加的)
在这里插入图片描述

因为我只需要判断是否下滑,所以其他的else就省略了

就此结束,应该没毛病。记录一下,顺便教一下需要的网友
请添加图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uniapp中实现上下滑动效果可以使用swipervideo组件的结合。首先,我们可以在uniapp官网的swiper组件中嵌套一个video组件来实现这个效果。在swiper-item的位置发生改变时,可以通过@transition事件来触发相应的操作,比如判断上滑还是下滑。 在父组件的html中,我们可以使用swiper组件来创建一个轮播图的效果。在swiper-item中,可以通过v-for循环来遍历视频列表并展示相应的视频。 总结来说,可以通过uniappswipervideo组件的结合来实现在uniapp中的上下滑动效果。通过设置swiper的相关属性和监听相应的事件来实现滑动操作,并在事件中处理上滑和下滑的逻辑。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [uniapp实现视频上下滑动功能](https://blog.csdn.net/weixin_46319117/article/details/125808944)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [uniapp实现视频上下滑动功能(小程序)以及video组件的暂停和播放](https://blog.csdn.net/weixin_46447120/article/details/121531294)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值