c***@163.com
c***@163.com
  • 发布:2024-09-19 11:53
  • 更新:2024-09-19 17:17
  • 阅读:135

【报Bug】movable-view在nvue页面有初始值时会从左上角移动到指定位置,会有明显的闪动

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

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

HBuilderX类型: 正式

HBuilderX版本号: 3.99

手机系统: 全部

手机厂商: 华为

页面类型: nvue

vue版本: vue3

打包方式: 云端

项目创建方式: HBuilderX

测试过的手机:

iphone12(17.6.1)华为mate60 mumu安卓模拟器

示例代码:
<template>  
    <view class="page-body">  
        <page-head title="movable-view,可拖动视图"></page-head>  
        <view class="uni-padding-wrap uni-common-mt">  
            <view class="uni-title uni-common-mt">  
                示例 1  
                <text>\nmovable-view 区域小于 movable-area</text>  
            </view>  
            <movable-area class="movable-area">  
                <movable-view class="movable-view" :x="x" :y="y" direction="all" @change="onChange">  
                    <view style="width: 150rpx; height: 200rpx">text</view>  
                </movable-view>  
            </movable-area>  
            <view @tap="tap" class="uni-link uni-center uni-common-mt">  
                点击这里移动至 (30px, 30px)  
            </view>  
        </view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                x: 150,  
                y: 30,  
                scale: 2,  
                old: {  
                    x: 0,  
                    y: 0,  
                    scale: 2  
                }  
            }  
        },  
        methods: {  
            tap: function(e) {  
                // 解决view层不同步的问题  
                this.x = this.old.x  
                this.y = this.old.y  
                this.$nextTick(function() {  
                    this.x = 30  
                    this.y = 30  
                })  
            },  
            onChange: function(e) {  
                this.old.x = e.detail.x  
                this.old.y = e.detail.y  
            }  
        }  
    }  
</script>  

<style>  
    .movable-view {  
        display: flex;  
        align-items: center;  
        justify-content: center;  
        height: 200rpx;  
        width: 150rpx;  
        background-color: #007AFF;  
        color: #fff;  
    }  

    .movable-area {  
        height: 300rpx;  
        width: 750rpx;  
        background-color: #D8D8D8;  
        overflow: hidden;  
    }  

    .max {  
        width:500rpx;  
        height: 500rpx;  
    }  
</style>

操作步骤:

使用上述代码即可

预期结果:

nvue中和vue一样无闪动效果

实际结果:

有闪动效果

bug描述:

在nvue页面中,movable-view的x、y初始设定值的时候,会在左上角出现一次再移动到设定的位置,且不会使用动画和阻尼系数,视觉效果是左上角闪一次后出现在指定位置,vue页面正常

2024-09-19 11:53 负责人:无 分享
已邀请:
BeardYound

BeardYound

可以尝试加一个从页面外移入的动画,然后延迟几百毫秒,等元素闪完移入页面

  • c***@163.com (作者)

    但这个不太符合业务需求,业务中会用到动态改变movable-view大小的情况,但这个组件也不支动态改,改了也不会重新渲染,所以此处我是用了v-if,强制刷新了这个组件,每次刷新都会出现上述情况闪一下

    2024-09-19 17:12

BeardYound

BeardYound

这个闪一下其实是里面的元素导致的,你只需要在元素上加一个动画延迟进入即可

.animation-slide-right {  
    animation-name: slide-right;  
}  

@keyframes slide-right {  
    0% {  
        opacity: 0;  
        transform: translateX(100%);  
    }  

    100% {  
        opacity: 1;  
        transform: translateX(0);  
    }  
}

要回复问题请先登录注册