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 相关文章推荐
基于mootools 1.3框架下的图片滑动效果代码
Apr 22 Javascript
推荐一款jQuery插件模板
Jan 09 Javascript
基于OL2实现百度地图ABCD marker的效果
Oct 01 Javascript
JavaScript获取浏览器信息的方法
Nov 20 Javascript
javascript每日必学之基础入门
Feb 16 Javascript
js数组常用操作方法小结(增加,删除,合并,分割等)
Aug 02 Javascript
基于js中的原型(全面讲解)
Sep 19 Javascript
Vue.directive 自定义指令的问题小结
Mar 04 Javascript
vue之将echart封装为组件
Jun 02 Javascript
JS 验证码功能的三种实现方式
Nov 26 Javascript
前端Electron新手入门教程详解
Jun 21 Javascript
Threejs实现滴滴官网首页地球动画功能
Jul 13 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数据库操作方法(MYSQL版)
2011/06/08 PHP
11个PHP 分页脚本推荐
2011/08/15 PHP
利用PHP生成静态HTML文档的原理
2012/10/29 PHP
php单例模式实现(对象只被创建一次)
2012/12/05 PHP
IIS安装Apache伪静态插件的具体操作图文
2013/07/01 PHP
Laravel 5框架学习之环境与配置
2015/04/08 PHP
Laravel 5框架学习之Eloquent 关系
2015/04/09 PHP
PHP模板引擎Smarty中的保留变量用法分析
2016/04/11 PHP
PHP单例模式详解及实例代码
2016/12/21 PHP
WebGame《逆转裁判》完整版 代码下载(1月24日更新)
2007/01/29 Javascript
Three.js源码阅读笔记(基础的核心Core对象)
2012/12/27 Javascript
javascript写的一个模拟阅读小说的程序
2014/04/04 Javascript
使用focus方法让光标默认停留在INPUT框
2014/07/29 Javascript
Bootstrap编写导航栏和登陆框
2016/05/30 Javascript
深入理解jQuery 事件处理
2016/06/14 Javascript
jQuery图片前后对比插件beforeAfter用法示例【附demo源码下载】
2016/09/20 Javascript
Vue中的Vux配置指南
2017/12/08 Javascript
vue-cli3.0使用及部分配置详解
2018/08/29 Javascript
微信小程序分包加载代码实现方法详解
2019/09/23 Javascript
原生js滑动轮播封装
2020/07/31 Javascript
express异步函数异常捕获示例详解
2020/11/30 Javascript
用javascript实现倒计时效果
2021/02/09 Javascript
python使用pycharm环境调用opencv库
2018/02/11 Python
python和shell获取文本内容的方法
2018/06/05 Python
详解如何在cmd命令窗口中搭建简单的python开发环境
2019/08/29 Python
Python 最强编辑器详细使用指南(PyCharm )
2019/09/16 Python
Python 整行读取文本方法并去掉readlines换行\n操作
2020/09/03 Python
日本高端护肤品牌:Tatcha
2016/08/29 全球购物
美国羽绒床上用品第一品牌:Pacific Coast
2018/08/25 全球购物
大学毕业生自荐书怎么写?
2014/01/06 职场文书
春季防火方案
2014/05/10 职场文书
工作检讨书500字
2014/10/19 职场文书
为什么说餐饮很难做,是因为你不了解这些新规则
2019/08/20 职场文书
用Python提取PDF表格的方法
2021/04/11 Python
Python中seaborn库之countplot的数据可视化使用
2021/06/11 Python
实战Python爬虫爬取酷我音乐
2022/04/11 Python