<template>
<list class="flex-1">
<cell class="flex-1">
<view
class="flex-1"
@longpress="startEdit"
@touchstart="touchstartHandler"
@touchmove="touchmoveHandler"
@touchend="touchendHandler"
>
<view class="" @click="clickHandler" v-for="item in 100" class="block1">
</view>
<view class="block" v-if="left !== 0" :style="{ left, top }"> </view>
</view>
</cell>
</list>
</template>
<script>
export default {
data() {
return {
left: 0,
top: 0,
isEidtor: false,
showBlock: false
};
},
methods: {
startEdit() {
this.isEidtor = true;
},
touchstartHandler(e) {
if (this.isEidtor) {
const { screenX, screenY } = e.changedTouches && e.changedTouches[0];
this.left = screenX - 25;
this.top = screenY - 25;
this.showBlock = true;
}
},
touchmoveHandler(e) {
if (this.isEidtor) {
const { screenX, screenY } = e.changedTouches && e.changedTouches[0];
this.left = screenX - 25;
this.top = screenY - 25;
}
},
clickHandler() {},
touchendHandler() {
this.isEidtor = false;
this.showBlock = false;
}
}
};
</script>
<style>
/* page {
height: 100% !important;
overflow: hidden;
display: flex;
flex-direction: column;
} */
.flex-1 {
flex: 1;
position: relative;
flex-direction: row;
flex-wrap: wrap;
}
.block {
background-color: #c2c2c2;
width: 50px;
height: 50px;
position: absolute;
}
.block1 {
background-color: #f00;
width: 50px;
height: 50px;
}
</style>
刘家后人
- 发布：2022-06-10 15:54
- 更新：2023-07-20 16:42
- 阅读：337
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： window10家庭版
HBuilderX类型： 正式
HBuilderX版本号： 3.4.7
手机系统： Android
手机系统版本号： Android 12
手机厂商： 华为
手机机型： 荣耀X10
页面类型： nvue
vue版本： vue2
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
操作步骤：
长按移动页面
长按移动页面
预期结果：
可以移动
可以移动
实际结果：
移动不了
移动不了
bug描述：
touchmove 能触发 但是 移动几下就卡死了
1 个回复
2***@qq.com
请问，这个问题解决了吗？