vue图片拖拽
<img ref='btnImg' class="btn-move" @touchstart='touchStart' @touchmove='touchMove' @touchend='touchEnd' :style="slideEffect"> </img>data:function(){
·
<img ref='btnImg' class="btn-move" @touchstart='touchStart' @touchmove='touchMove' @touchend='touchEnd' :style="slideEffect">
</img>
data:function(){
return {isShow:false,
startX:0,//开始触摸的位置
moveX:0,//滑动时的位置
endX:0,//结束触摸的位置
disX:0,//移动距离
slideEffect:'',//滑动时的效果
},
touchStart(ev) {
ev = ev || event;
ev.preventDefault();
if (ev.touches.length == 1) {
this.startX = ev.touches[0].clientX; // 记录开始位置
}
},
touchMove(ev) {
ev = ev || event;
ev.preventDefault();
if (ev.touches.length == 1) {
this.moveX = ev.touches[0].clientX;
this.disX = this.moveX - this.startX;
this.slideEffect = 'transform:translateX('+this.disX+'px)';
}
},
touchEnd(ev) {},
更多推荐
已为社区贡献3条内容
所有评论(0)