1***@qq.com
1***@qq.com
  • 发布:2023-01-07 21:55
  • 更新:2023-01-07 21:58
  • 阅读:250

【报Bug】renderjs做可拖拽得悬浮小窗视频,App端外层view被拖动了,视频不会动

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win10

HBuilderX类型: 正式

HBuilderX版本号: 3.6.15

手机系统: Android

手机系统版本号: Android 12

手机厂商: vivo

手机机型: vivoX80

页面类型: vue

vue版本: vue2

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
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>  

操作步骤:

新建页面,复制粘贴示例代码,运行到App端

预期结果:

类似拼多多商品详情页的悬浮可拖拽的直播小窗口

实际结果:

view被拖动了,video标签不动

bug描述:

video标签在view里面,renderjs改变view的top和left,视频不动

2023-01-07 21:55 负责人:无 分享
已邀请:
1***@qq.com

1***@qq.com (作者)

安卓手机@touchmove拖动视频窗口好卡,超级卡,所以希望可以用renderjs实现

要回复问题请先登录注册