s***@cciigroup.com
s***@cciigroup.com
  • 发布:2023-03-02 10:23
  • 更新:2024-04-15 16:56
  • 阅读:458

【报Bug】nvue页面安卓端 @touchmove 拖动时获取的event的值呼高忽低造成抖动!

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

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

HBuilderX类型: 正式

HBuilderX版本号: 3.7.3

手机系统: Android

手机系统版本号: Android 11

手机厂商: 华为

手机机型: 10

页面类型: nvue

vue版本: vue2

打包方式: 云端

项目创建方式: HBuilderX

App下载地址或H5⽹址: https://m.cciinet.com/pages/code/index?source=h5

示例代码:

        <view  
            id="_drag_button"  
            ref="_drag_button"  
            class="drag"  
            :style="'left:' + left + 'px; top:' + top + 'px;width:'+wd+';height:'+hg"  
            @touchstart="touchstart"  
            @touchmove.stop.prevent="touchmove"  
            @touchend="touchend"  
            @click.stop.prevent="click"  
            :class="{transition: isDock && !isMove }"  
        >  
            <slot></slot>  
        </view>  

</template>  

<script>  
     // #ifdef APP-NVUE  
      const dom = weex.requireModule('dom')  
      // #endif  
    export default {  
        name: 'drag-button',  
        props: {  
            isDock:{  
                type: Boolean,  
                default: false  
            },  
            existTabBar:{  
                type: Boolean,  
                default: false  
            },  
            wd:{  
                type: String,  
                default:'149rpx'  
            },  
            hg:{  
                type: String,  
                default:'172rpx'  
            }  
        },  
        data() {  
            return {  
                top:0,  
                left:0,  
                width: 0,  
                height: 0,  
                offsetWidth: 0,  
                offsetHeight: 0,  
                windowWidth: 0,  
                windowHeight: 0,  
                isMove: true,  
                edge: 0,  
                text: '按钮'  
            }  
        },  
        mounted() {  
            const sys = uni.getSystemInfoSync();  
            console.log('sys',sys)  
            this.windowWidth = sys.windowWidth;  
            this.windowHeight = sys.windowHeight;  

            // #ifdef APP-PLUS  
                this.existTabBar && (this.windowHeight -= 0);  //50  
            // #endif  
            if (sys.windowTop) {  
                this.windowHeight += sys.windowTop;  
            }  
            console.log(sys)  
            // #ifdef APP-NVUE  
             setTimeout(()=> {  
                const result = dom.getComponentRect(this.$refs._drag_button, option => {  
                    console.log('getComponentRect:', option)  
                    var data = option.size  
                    this.width = data.width;  
                    this.height = data.height;  
                    this.offsetWidth = data.width / 2;  
                    this.offsetHeight = data.height / 2;  
                    this.left = this.windowWidth - this.width - this.edge;  
                    this.top = this.windowHeight - this.height - this.edge -100;  
                    console.log(this.left,this.top)  
                })  
            })  
            // #endif  
            // #ifndef APP-NVUE  
            const query = uni.createSelectorQuery().in(this);  
            query.select('#_drag_button').boundingClientRect(data => {  
                console.log('_drag_button',data)  
                this.width = data.width;  
                this.height = data.height;  
                this.offsetWidth = data.width / 2;  
                this.offsetHeight = data.height / 2;  
                this.left = this.windowWidth - this.width - this.edge;  
                this.top = this.windowHeight - this.height - this.edge -100;  
            }).exec();  
            // #endif  
        },  
        methods: {  
            click() {  
                this.$emit('btnClick');  
            },  
            touchstart(e) {  

                this.$emit('btnTouchstart');  
            },  
            touchmove(e) {  
                                e.stopPropagation()  
                console.log(e.touches[0].pageX,e.touches[0].pageY)  
                // 单指触摸  
                if (e.touches.length !== 1) {  
                    return false;  
                }  

                this.isMove = true;  

                this.left = (e.touches[0].clientX || e.touches[0].pageX) - this.offsetWidth;  

                let clientY = (e.touches[0].clientY || e.touches[0].pageY) - this.offsetHeight;  
                // #ifdef H5  
                    clientY += this.height;  
                // #endif  
                let edgeBottom = this.windowHeight - this.height - this.edge;  

                // 上下触及边界  
                if (clientY < this.edge) {  
                    this.top = this.edge;  
                } else if (clientY > edgeBottom) {  
                    this.top = edgeBottom;  
                } else {  
                    this.top = clientY  
                }  

            },  
            touchend(e) {  
                if (this.isDock) {  
                    let edgeRigth = this.windowWidth - this.width - this.edge;  

                    if (this.left < this.windowWidth / 2 - this.offsetWidth) {  
                        this.left = this.edge;  
                    } else {  
                        this.left = edgeRigth;  
                    }  

                }  

                this.isMove = false;  

                this.$emit('btnTouchend');  
            },  
        }}  
</script>  

<style lang="scss">  
    .drag {  
        display: flex;  
        justify-content: center;  
        align-items: center;  
        // background-color: rgba(0, 0, 0, 0.5);  
        // box-shadow: 0 0 6upx rgba(0, 0, 0, 0.4);  
        color: $uni-text-color-inverse;  
        border-radius: 50%;  
        font-size: $uni-font-size-sm;  
        /* #ifdef APP-NVUE*/  
        position: absolute;  
        /* #endif */  
        /* #ifdef H5 || MP-WEIXIN || APP-VUE*/  
        position: fixed;  
        z-index: 9999999;  
        /* #endif */  
    }  
    .transition {  
        transition: left .3s ease,top .3s ease;  
    }  
</style>  

操作步骤:

如上代码可复现

预期结果:

不抖动

实际结果:

抖动

bug描述:

nvue页面安卓端 ```javascript
@touchmove



目前测试小程序,ios,h5无问题,非nvue页面无问题  

目前只有nvue安卓端有此问题!!  

附件内的值就是拖动获取的 e.touches[0].pageX,e.touches[0].pageY 一会高 一会低   

压缩包内为视频
2023-03-02 10:23 负责人:DCloud_Android_ST 分享
已邀请:
DCloud_Android_ST

DCloud_Android_ST

为了节省多方时间 请附件提供完整示例demo 方便我们快速复现排查

1***@163.com

1***@163.com

今天也碰到了.换成screenY好了.

要回复问题请先登录注册