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 相关文章推荐
一个简单的jQuery计算器实现了连续计算功能
Jul 21 Javascript
JavaScript中模拟实现jsonp
Jun 19 Javascript
全面解析JS字符串和正则表达式中的match、replace、exec等函数
Jul 01 Javascript
JavaScript对象封装的简单实现方法(3种方法)
Jan 03 Javascript
微信小程序  checkbox组件详解及简单实例
Jan 10 Javascript
AngularJS 单选框及多选框的双向动态绑定
Apr 20 Javascript
vue组件与复用详解
Apr 08 Javascript
vue通过style或者class改变样式的实例代码
Oct 30 Javascript
在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟
Nov 28 Javascript
怎样使你的 JavaScript 代码简单易读(推荐)
Apr 16 Javascript
基于vue+axios+lrz.js微信端图片压缩上传方法
Jun 25 Javascript
JavaScript中的类型检查
Feb 03 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
咖啡豆分级制度 咖啡豆等级分类 咖啡豆是按口感分类的吗?
2021/03/05 新手入门
Apache, PHP在Windows 9x/NT下的安装与配置 (一)
2006/10/09 PHP
ThinkPHP单字母函数(快捷方法)使用总结
2014/07/23 PHP
php新浪微博登录接口用法实例
2014/12/23 PHP
PHP图像识别技术原理与实现
2016/10/27 PHP
input 高级限制级用法
2009/03/26 Javascript
javascript cookies 设置、读取、删除实例代码
2010/04/12 Javascript
JavaScript 打地鼠游戏代码说明
2010/10/12 Javascript
jQuery简单图表peity.js使用示例
2014/05/02 Javascript
jquery动态改变form属性提交表单
2014/06/03 Javascript
更高效的使用JQuery 这里总结了8个小技巧
2016/04/13 Javascript
jQuery.Callbacks()回调函数队列用法详解
2016/06/14 Javascript
Vuex之理解Getters的用法实例
2017/04/19 Javascript
jQuery条件分页 代替离线查询(附代码)
2017/08/17 jQuery
Three.js利用dat.GUI如何简化试验流程详解
2017/09/26 Javascript
实例分析JS与Node.js中的事件循环
2017/12/12 Javascript
微信小程序网络封装(简单高效)
2018/08/06 Javascript
详解JS深拷贝与浅拷贝
2020/08/04 Javascript
python中使用pyhook实现键盘监控的例子
2014/07/18 Python
浅谈Python中带_的变量或函数命名
2017/12/04 Python
django基于restframework的CBV封装详解
2019/08/08 Python
pyftplib中文乱码问题解决方案
2020/01/11 Python
40行Python代码实现天气预报和每日鸡汤推送功能
2020/02/27 Python
最新版 Windows10上安装Python 3.8.5的步骤详解
2020/11/28 Python
解决margin 外边距合并问题
2019/07/03 HTML / CSS
海量信息软件测试笔试题
2015/08/08 面试题
集团薪酬管理制度
2014/01/13 职场文书
模具设计与制造专业推荐信
2014/02/16 职场文书
经贸专业毕业生求职信
2014/03/23 职场文书
幼儿园运动会口号
2014/06/07 职场文书
法人单位适用的授权委托书
2014/09/19 职场文书
出纳岗位职责
2015/01/31 职场文书
2015年个人思想总结
2015/03/09 职场文书
启迪人心的励志语录:脾气永远不要大于本事
2020/01/02 职场文书
php中配置文件保存修改操作 如config.php文件的读取修改等操作
2021/05/12 PHP
win11无法添加打印机怎么办? 提示windows无法打开添加打印机的解决办法
2022/04/05 数码科技