- 发布:2024-09-19 11:53
- 更新:2024-09-19 17:17
- 阅读:135
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: 22621.3007
HBuilderX类型: 正式
HBuilderX版本号: 3.99
手机系统: 全部
手机厂商: 华为
页面类型: nvue
vue版本: vue3
打包方式: 云端
项目创建方式: HBuilderX
测试过的手机:
示例代码:
<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>
<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一样无闪动效果
nvue中和vue一样无闪动效果
实际结果:
有闪动效果
有闪动效果
bug描述:
在nvue页面中,movable-view的x、y初始设定值的时候,会在左上角出现一次再移动到设定的位置,且不会使用动画和阻尼系数,视觉效果是左上角闪一次后出现在指定位置,vue页面正常
c***@163.com (作者)
但这个不太符合业务需求,业务中会用到动态改变movable-view大小的情况,但这个组件也不支动态改,改了也不会重新渲染,所以此处我是用了v-if,强制刷新了这个组件,每次刷新都会出现上述情况闪一下
2024-09-19 17:12