收藏
回答

movable-view动态direction无效果?

求高手指点,您好,小程序入门阶段,在社区看到您回复movable-view的问题,和我现在的情况很匹配,特此打扰请教下。用movable-view做缩放和拖拽操作,在获得目标区域后长按进行选中,希望长按后手指移动时原图不再被拖拽,尝试了两个方法,都没达到效果:

方法1,采用动态设置direction未能实现效果,结果是在js中把direction设置为none后还是可以拖动;

方法2,尝试了disabled方法,结果是增加了disabled参数后,无论设置为true还是false都无法拖拽。

参考了社区链接未能实现,最下面为我的代码,还请大神指点,万分感谢!!



https://developers.weixin.qq.com/community/develop/doc/000664fd194eb81a5ef8b88a65b400?_at=1617094968350






<template>


<view>


<movable-area>


<movable-view


class="movable-view" 


:direction="direction"


out-of-bounds="true"


@change="onChange"


@longtap='longtap'


@scale="onScale"


scale="true"


scale-value="1"


scale-min="1"


scale-max="4"


>


text


</movable-view>


</movable-area>


</view>


</template>




<script>


export default{


data() {


return {


direction:"all",


disabled:"false",


}


},



methods: {


//获取长按时的坐标


longtap(event){


this.direction = "none"


console.log(this.direction)


},


//响应拖动图片事件


onChange(event){


this.direction = "none"


console.log('123456732')


},


}


}


</script>




<style>


movable-view {


display: flex;


align-items: center;


justify-content: center;


height: 150rpx;


width: 150rpx;


background-color: #007AFF;


color: #fff;


}


movable-area {


height: 700rpx;


width: 100%;


background-color: #D8D8D8;


overflow: hidden;


}


</style>

回答关注问题邀请回答
收藏
登录 后发表内容
问题标签