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的面向对象(二)
Nov 09 Javascript
document.compatMode的CSS1compat使用介绍
Apr 03 Javascript
jquery实现更改表格行顺序示例
Apr 30 Javascript
JS修改iframe页面背景颜色的方法
Apr 01 Javascript
node.js cookie-parser之parser.js
Jun 06 Javascript
JS中IP地址与整数相互转换的实现代码
Apr 10 Javascript
AngularJS 霸道的过滤器小结
Apr 26 Javascript
详解Javascript获取缓存和清除缓存API
May 25 Javascript
JS实现的计数排序与基数排序算法示例
Dec 04 Javascript
关于vue的npm run dev和npm run build的区别介绍
Jan 14 Javascript
基于Taro的微信小程序模板消息-获取formId功能模块封装实践
Jul 15 Javascript
微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)
Mar 10 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
PHP 提取图片img标记中的任意属性的简单实例
2013/12/10 PHP
Smarty高级应用之缓存操作技巧分析
2016/05/14 PHP
让你的PHP7更快之Hugepage用法分析
2016/05/31 PHP
浅谈PHP链表数据结构(单链表)
2016/06/08 PHP
利用PHP自动生成印有用户信息的名片
2016/08/01 PHP
PHP下 Mongodb 连接远程数据库的实例代码
2017/08/30 PHP
你可能不再需要JQUERY
2021/03/09 Javascript
js一组验证函数
2008/12/20 Javascript
jquery 插件开发 extjs中的extend用法小结
2013/01/04 Javascript
JavaScript中window.showModalDialog()用法详解
2014/12/18 Javascript
Jquery 实现grid绑定模板
2015/01/28 Javascript
nodejs实现获取某宝商品分类
2015/05/28 NodeJs
jquery中toggle函数交替使用问题
2015/06/22 Javascript
纯JavaScript代码实现移动设备绘图解锁
2015/10/16 Javascript
JQuery的Pager分页器实现代码
2016/05/03 Javascript
Bootstrap学习笔记 轮播(Carousel)插件
2017/03/21 Javascript
JS基于for语句编写的九九乘法表示例
2018/01/04 Javascript
解决VUE框架 导致绑定事件的阻止冒泡失效问题
2018/02/24 Javascript
解决layui批量传值到后台操作时出现传值为空的问题
2019/09/28 Javascript
[49:35]2018DOTA2亚洲邀请赛3月30日 小组赛A组 KG VS TNC
2018/03/31 DOTA
Python获取当前时间的方法
2014/01/14 Python
使用Python脚本对Linux服务器进行监控的教程
2015/04/02 Python
python使用xlrd实现检索excel中某列含有指定字符串记录的方法
2015/05/09 Python
Python实现Windows和Linux之间互相传输文件(文件夹)的方法
2017/05/08 Python
对python中Json与object转化的方法详解
2018/12/31 Python
TensorFLow 不同大小图片的TFrecords存取实例
2020/01/20 Python
python中def是做什么的
2020/06/10 Python
HTML5添加禁止缩放功能
2017/11/03 HTML / CSS
Vince官网:全球著名设计师品牌,休闲而优雅的服饰
2017/01/15 全球购物
美国波道夫·古德曼百货官网:Bergdorf Goodman
2017/11/07 全球购物
adidas马来西亚官网:adidas MY
2020/09/12 全球购物
在阿联酋购买翻新手机和平板电脑:Teckzu
2021/02/12 全球购物
大学学习计划书范文
2014/05/02 职场文书
2014年教师政治学习材料
2014/06/02 职场文书
2016年度基层党建工作公开承诺书
2016/03/25 职场文书
浅谈mysql哪些情况会导致索引失效
2021/11/20 MySQL