uni-app movable-view在nvue页面有初始值时会从左上角移动到指定位置 有明显闪动

发布于 1周前 作者 wuwangju 来自 Uni-App

uni-app movable-view在nvue页面有初始值时会从左上角移动到指定位置 有明显闪动

测试过的手机

  • 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页面正常

Harmonyos Next教程
4 回复

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


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

这个闪一下其实是里面的元素导致的，你只需要在元素上加一个动画延迟进入即可
.animation-slide-right {
animation-name: slide-right;
}

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

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

}

在uni-app中，movable-view组件用于在nvue页面实现拖拽效果。如果在nvue页面中使用movable-view并为其设置初始值，可能会遇到从左上角移动到指定位置时的明显闪动问题。这通常是由于视图初始化位置和动画效果之间的冲突导致的。

为了解决这个问题，我们可以尝试在初始化时平滑地设置movable-view的位置，而不是直接跳到指定位置。以下是一个示例代码，展示了如何使用animation属性来控制movable-view的初始位置，以减少闪动效果。

首先，确保在nvue页面的<script>部分导入必要的模块：

export default {
    data() {
        return {
            animationData: {}
        };
    },
    onReady() {
        this.initMovableView();
    },
    methods: {
        initMovableView() {
            const animation = uni.createAnimation({
                duration: 0, // 设置动画时间为0，实现瞬间移动效果（但这里是为了平滑过渡的演示，实际中可以根据需要调整）
                timingFunction: 'ease'
            });
            animation.translateX(100).translateY(150); // 设置初始位置偏移量
            this.animationData = animation.export();
        }
    }
};

然后，在nvue页面的<template>部分使用movable-view组件，并绑定动画数据：

<template>
    <div>
        <movable-view :style="animationStyle" direction="all" inertia="{{true}}" out-of-bounds="{{true}}">
            <view class="movable-content">Drag me</view>
        </movable-view>
    </div>
</template>

<script>
export default {
    computed: {
        animationStyle() {
            return `transform: ${this.animationData.transform || 'translate(0, 0)'};`;
        }
    },
    // ... (其他代码，如onReady和methods部分已在上方给出)
};
</script>

<style>
.movable-content {
    width: 100px;
    height: 100px;
    background-color: red;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}
</style>

在这个示例中，我们创建了一个动画对象，并在onReady生命周期钩子中设置了movable-view的初始位置偏移量。然后，我们通过计算属性animationStyle将动画数据绑定到movable-view的style属性上。这种方法可以帮助我们更平滑地设置movable-view的初始位置，从而减少从左上角移动到指定位置时的闪动效果。

请注意，这里的动画时间设置为0是为了演示目的，实际使用中可以根据需要调整动画时间来达到最佳效果。

回到顶部