javascript
<template>
<view class="dargbox" id="dargbox" style="top: 0;left: 0;" @touchstart="renDer.touchstart"
@touchmove="renDer.touchmove" @touchend="renDer.touchend">
<video class="player" :enable-progress-gesture="false"
src="https://yosm-file.aushanviviin.com/pc/upload/video/2022/07/62de0def6e161.mp4"></video>
</view>
</template>
<script module="renDer" lang="renderjs">
let pageX
let pageY
export default {
mounted() {
let dargbox = document.getElementById('dargbox')
console.log(dargbox.style.top)
console.log(dargbox.style.left)
},
methods: {
touchstart(e) {
pageX = e.changedTouches[0].pageX
pageY = e.changedTouches[0].pageY
},
touchmove(e) {
let moveX = e.changedTouches[0].pageX - pageX
let moveY = e.changedTouches[0].pageY - pageY
let dargbox = document.getElementById('dargbox')
let position = dargbox.getBoundingClientRect()
dargbox.style.left = position.x + moveX + 'px'
dargbox.style.top = position.y + moveY + 'px'
pageX = e.changedTouches[0].pageX
pageY = e.changedTouches[0].pageY
},
touchend() {
},
}
}
</script>
<style lang="less">
.dargbox {
width: 180px;
height: 248px;
position: absolute;
background-color: #000;
border-radius: 10rpx;
video {
width: 100%;
height: 100%;
}
}
</style>
- 发布:2023-01-07 21:55
- 更新:2023-01-07 21:58
- 阅读:250
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: win10
HBuilderX类型: 正式
HBuilderX版本号: 3.6.15
手机系统: Android
手机系统版本号: Android 12
手机厂商: vivo
手机机型: vivoX80
页面类型: vue
vue版本: vue2
打包方式: 云端
项目创建方式: HBuilderX
示例代码:
操作步骤:
新建页面,复制粘贴示例代码,运行到App端
新建页面,复制粘贴示例代码,运行到App端
预期结果:
类似拼多多商品详情页的悬浮可拖拽的直播小窗口
类似拼多多商品详情页的悬浮可拖拽的直播小窗口
实际结果:
view被拖动了,video标签不动
view被拖动了,video标签不动
bug描述:
video标签在view里面,renderjs改变view的top和left,视频不动
1 个回复
1***@qq.com (作者)
安卓手机@touchmove拖动视频窗口好卡,超级卡,所以希望可以用renderjs实现