vue移动端的左右滑动事件详解

时间：2021-05-26

本文实例为大家分享了vue移动端左右滑动事件，供大家参考，具体内容如下

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src="https://unpkg.com/vue"></script> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta content="telephone=no" name="format-detection"> <style> *{padding: 0;margin: 0;} body {background: #EEEEEE;} .box {text-align: center;} .btn { position: relative; width: 70%; height: 40px; margin: 150px auto; border-radius: 20px; background: #333333; } .btn-move { position: absolute; left: 0; top: 0; width: 40px; height: 40px; border-radius: 20px; background: #ededed; } .tt { font-size: 20px; color: #008000; text-align: center; margin-top: 50px; } </style> </head> <body> <div id="box"> <slide-release></slide-release> </div> <script type="text/x-template" id="slide"> <div> <div class="btn" ref='remove'> <span ref='btnImg' class="btn-move" @touchstart='touchStart' @touchmove='touchMove' @touchend='touchEnd' :style="slideEffect" > </span> </div> <p class="tt" v-show="isShow">你滑动成功了！</p> </div> </script> <script> Vue.component('slide-release',{ template:'#slide', data:function(){ return { isShow:false, startX:0,//开始触摸的位置 moveX:0,//滑动时的位置 endX:0,//结束触摸的位置 disX:0,//移动距离 slideEffect:'',//滑动时的效果,使用v-bind:style="deleteSlider" } }, methods:{ touchStart:function(ev) { ev = ev || event; ev.preventDefault();// console.log(ev.targetTouches);// console.log(ev.changedTouches); if(ev.touches.length == 1) { //tounches类数组，等于1时表示此时有只有一只手指在触摸屏幕 this.startX = ev.touches[0].clientX; // 记录开始位置 } }, touchMove:function(ev) { ev = ev || event; ev.preventDefault(); let btnWidth = this.$refs.remove.offsetWidth; //$refs 减少获取dom节点的消耗 let btnImg = this.$refs.btnImg.offsetWidth; console.log(ev.targetTouches); console.log(ev.changedTouches); if(ev.touches.length == 1) { //滑动时距离浏览器左侧的距离 this.moveX = ev.touches[0].clientX; //实时的滑动的距离-起始位置=实时移动的位置 this.disX = this.moveX-this.startX; if(this.disX<0 || this.disX == 0) { this.slideEffect = 'transform:translateX(0px)'; }else if(this.disX>0){ this.slideEffect = 'transform:translateX('+this.disX+'px)'; // 最大也只能等于删除按钮宽度 if(this.disX>=btnWidth) { this.slideEffect = 'transform:translateX('+(btnWidth-btnImg)+'px)'; } } } }, touchEnd:function(ev){ ev = ev || event; ev.preventDefault(); let btnWidth = this.$refs.remove.offsetWidth; let btnImg = this.$refs.btnImg.offsetWidth;// console.log(ev.changedTouches); if(ev.changedTouches.length == 1) { let endX = ev.changedTouches[0].clientX; this.disX = endX-this.startX; console.log(this.disX,'this.disX') console.log((btnWidth/2),'btnWidth/2'); if(this.disX < (btnWidth/2)) { this.slideEffect = 'transform:translateX(0px)'; }else { this.slideEffect = "transform:translateX("+(btnWidth-btnImg)+ "px)"; //让字段显示出来，或者写你需要的逻辑 this.isShow = true } } } } }) var vm = new Vue({ el:'#box', }) </script> </body></html>

关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。

更多vue学习教程请阅读专题《vue实战教程》

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章