vue仿ios列表左划删除


Posted in Javascript onSeptember 26, 2019

本文实例为大家分享了vue仿ios列表左划删除的具体代码,供大家参考,具体内容如下

效果:

vue仿ios列表左划删除

代码:

<template>
   <div class="delete">
       <div class="slider">
          <div class="content" 
           @touchstart='touchStart'
           @touchmove='touchMove'
           @touchend='touchEnd'
           :style="deleteSlider"
          >
        <!-- 插槽中放具体项目中需要内容     -->  
          <slot></slot>
          </div>
          <div class="remove" ref='remove'>
            删除
          </div>
      </div>
    
   </div>
</template>
 
 
 
<script type="text/ecmascript-6">
 export default {
   data() {
   return {
    startX:0,  //触摸位置
    endX:0,   //结束位置
    moveX: 0,  //滑动时的位置
    disX: 0,  //移动距离
    deleteSlider: '',//滑动时的效果,使用v-bind:style="deleteSlider"
   }
  
   },
   methods:{
     touchStart(ev){
        ev= ev || event
     //tounches类数组,等于1时表示此时有只有一只手指在触摸屏幕
  
      if(ev.touches.length == 1){
          // 记录开始位置
          this.startX = ev.touches[0].clientX;
        }
      },
     touchMove(ev){
        ev = ev || event;
          //获取删除按钮的宽度,此宽度为滑块左滑的最大距离
        let wd=this.$refs.remove.offsetWidth;
          if(ev.touches.length == 1) {
            // 滑动时距离浏览器左侧实时距离
            this.moveX = ev.touches[0].clientX
        
            //起始位置减去 实时的滑动的距离,得到手指实时偏移距离
            this.disX = this.startX - this.moveX;
          console.log(this.disX)
            // 如果是向右滑动或者不滑动,不改变滑块的位置
            if(this.disX < 0 || this.disX == 0) {
              this.deleteSlider = "transform:translateX(0px)";
            // 大于0,表示左滑了,此时滑块开始滑动 
            }else if (this.disX > 0) {
               //具体滑动距离我取的是 手指偏移距离*5。
              this.deleteSlider = "transform:translateX(-" + this.disX*5 + "px)";
              
              // 最大也只能等于删除按钮宽度 
              if (this.disX*5 >=wd) {
                this.deleteSlider = "transform:translateX(-" +wd+ "px)";
               
              }
            }
          }
       },
     touchEnd(ev){
       ev = ev || event;
       let wd=this.$refs.remove.offsetWidth;
       if (ev.changedTouches.length == 1) {
          let endX = ev.changedTouches[0].clientX;
           
            this.disX = this.startX - endX;
            console.log(this.disX)
            //如果距离小于删除按钮一半,强行回到起点
            
            if ((this.disX*5) < (wd/2)) {
             
              this.deleteSlider = "transform:translateX(0px)";
            }else{
              //大于一半 滑动到最大值
               this.deleteSlider = "transform:translateX(-"+wd+ "px)";
            }
          }
        }   
   }
   }
</script>       
 
<style scoped lang="less">
  .slider{
    width: 100%;
    height:100px;
    position: relative;
     user-select: none;
    .content{
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background:green;
      z-index: 100;
      //  设置过渡动画
      transition: 0.3s;
       
    }
    .remove{
      position: absolute;
      width:200px;
      height:100px;
      background:red;
      right: 0;
      top: 0;
      color:#fff;
      text-align: center;
      font-size: 40px;
      line-height: 100px;
    }
  }
 
</style>

 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript操纵Cookie实现购物车程序
Feb 15 Javascript
jquery $.each()使用探讨
Sep 23 Javascript
js AppendChild与insertBefore用法详细对比
Dec 16 Javascript
js中哈希表的几种用法总结
Jan 28 Javascript
测试IE浏览器对JavaScript的AngularJS的兼容性
Jun 19 Javascript
JavaScript如何实现在文本框(密码框)输入提示语
Dec 25 Javascript
微信小程序中的swiper组件详解
Apr 14 Javascript
利用n工具轻松管理Node.js的版本
Apr 21 Javascript
vue2.0项目中使用Ueditor富文本编辑器示例代码
Aug 14 Javascript
微信小程序实现倒计时补零功能
Jul 09 Javascript
基于js Canvas实现二次贝塞尔曲线
Dec 25 Javascript
Vue.js的模板语法详解
Feb 16 Javascript
微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能
Sep 26 #Javascript
vue实现百度搜索功能
Dec 28 #Javascript
vue+element搭建后台小总结 el-dropdown下拉功能
Apr 10 #Javascript
Vue 中使用富文本编译器wangEditor3的方法
Sep 26 #Javascript
react实现同页面三级跳转路由布局
Sep 26 #Javascript
vue轮播组件实现$children和$parent 附带好用的gif录制工具
Sep 26 #Javascript
小程序调用微信支付的方法
Sep 26 #Javascript
You might like
第4章 数据处理-php数组的处理-郑阿奇
2011/07/04 PHP
PHP迭代器的内部执行过程详解
2013/11/12 PHP
thinkphp模板输出技巧汇总
2014/11/24 PHP
再推荐十款免费的php开发工具
2015/11/09 PHP
document对象execCommand的command参数介绍
2006/08/01 Javascript
JQuery autocomplete 使用手册
2010/04/01 Javascript
一个JavaScript用逗号分割字符串实例
2014/09/22 Javascript
javascript实现漂亮的拖动层,窗口拖拽特效
2015/04/24 Javascript
javascript实现类似百度分享功能的方法
2015/07/27 Javascript
解决js函数闭包内存泄露问题的办法
2016/01/25 Javascript
JS创建事件的三种方法(实例代码)
2016/05/12 Javascript
jQuery实现checkbox列表的全选、反选功能
2016/11/24 Javascript
JavaScript 最佳实践:帮你提升代码质量
2016/12/03 Javascript
jQuery点击导航栏选中更换样式的实现代码
2017/01/23 Javascript
canvas实现简易的圆环进度条效果
2017/02/28 Javascript
jQuery is not defined 错误原因与解决方法小结
2017/03/19 Javascript
详解vue事件对象、冒泡、阻止默认行为
2017/03/20 Javascript
js实现自动图片轮播代码
2017/03/22 Javascript
微信小程序教程系列之设置标题栏和导航栏(7)
2020/06/29 Javascript
微信小程序图片自适应支持多图实例详解
2017/06/21 Javascript
Angular4 中内置指令的基本用法
2017/07/31 Javascript
使用Eclipse如何开发python脚本
2018/04/11 Python
对python append 与浅拷贝的实例讲解
2018/05/04 Python
Python解析并读取PDF文件内容的方法
2018/05/08 Python
Django中Middleware中的函数详解
2019/07/18 Python
Django通过设置CORS解决跨域问题
2020/11/26 Python
纯DOM+CSS3实现简单的小风车动画
2016/09/27 HTML / CSS
纯css3实现宠物小鸡实例代码
2018/10/08 HTML / CSS
利达恒信公司.NET笔试题面试题
2016/03/05 面试题
电气自动化个人求职信范文
2014/02/03 职场文书
寒假安全保证书
2015/02/28 职场文书
医院见习总结
2015/06/24 职场文书
青年人初次创业的“五不要”
2019/08/23 职场文书
《思路决定出路》读后感3篇
2019/12/11 职场文书
css 边框添加四个角的实现代码
2021/10/16 HTML / CSS
WCG2010 星际争霸决赛 Flash vs Goojila 1 星际经典比赛回顾
2022/04/01 星际争霸