使用Vue实现移动端左滑删除效果附源码


Posted in Javascript onMay 16, 2019

左滑删除在移动端是很常见的一种操作,常见于删除购物车中的商品,删除收藏夹中文章等等场景。我们只需要手指按住要删除的对象,然后轻轻向左滑动,便会出现删除按钮,然后点击删除按钮即可删除对象。

 点击下载源码

今天我给大家介绍的移动端左滑删除效果是基于Vue2实现的,结合以电商平台的删除购物车商品为例,来看实现步骤。

准备

安装vue项目过程已忽略,如果不懂vue的同学可以上官网看下:https://cn.vuejs.org/v2/guide/installation.html#NPM

我们使用安装一个webpack模板:

vue init webpack test

组件

我们创建一个左滑删除组件,在src/components目录下创建文件:deleteTemplate.vue,然后编写模板代码:

<template>
  <div class="delete">
    <div class="slider">
      <div class="content" @touchstart='touchStart' @touchmove='touchMove' @touchend='touchEnd' :style="deleteSlider">
        <!-- 插槽中放具体项目中需要内容 -->
        <slot name="img"></slot>
        <slot name="title"></slot>
        <slot name="price"></slot>
        <!-- 默认插槽 -->
        <slot></slot>
      </div>
      <div class="remove" ref='remove' @click="deleteLine">
        删除
      </div>
    </div>
  </div>
</template>

我们这个模板是一个要左滑删除的列表项,绑定了手势滑动触控动作响应,在其中加入了图片、商品名称和价格等内容,以及一个删除按钮。

接下来,我们看组件中的js部分:

<script>
export default {
  props: ['index'],
  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)";
        } else if (this.disX > 0) {// 大于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)";
        }
      }
    },
    deleteLine (){
      this.deleteSlider = "transform:translateX(0px)";
      this.$emit('deleteLine');
    }  
  }
}
</script>

我们在代码中主要用到三个移动端触控事件:

touchstart : 手指放到屏幕上时触发

touchmove : 手指在屏幕上滑动式触发

touchend :手指离开屏幕时触发

每个触控事件被触发后,会生成一个event对象,event对象里额外包括以下三个触控列表

touches : 当前屏幕上所有手指的列表

targetTouches : 当前dom元素上手指的列表,尽量使用这个代替touches

changedTouches : 涉及当前事件的手指的列表,尽量使用这个代替touches

这些列表里的每次触控由touch对象组成,touch对象里包含着触控信息,主要属性如下:

clientX / clientY : 触摸点相对浏览器窗口的位置

pageX / pageY : 触摸点相对于页面的位置

screenX / screenY : 触摸点相对于屏幕的位置

在上述代码中还可以看到,当滑块没有超过删除按钮的一半时自动回到起点位置。点击删除后调用deleteLine删除当前行。

组件调用

我们在HelloWorld.vue中建立模板,引入组件deleteSlider,代码如下:

<template>
 <div class="mylist">  
  <delete-slider v-for="(list, index) in dataList" :key="index" @deleteLine="deleteLine(index, list.id)">
   <div class="li-img" slot="img"><img :src="list.img" alt=""></div>
   <h3 class="li-title" slot="title">{{list.title}}</h3>
   <p class="li-price" slot="price">{{list.price}}</p>
  </delete-slider> 
 </div>
</template>

<script>


import deleteSlider from '@/components/deleteTemplate.vue'

export default {
 components: {
  deleteSlider
 },
 data () {
  return {
   dataList: [
    {
     id: 1,
     img: 'static/a1.jpg',
     title: '法国专柜2019夏季新款修身显瘦气质包臀短裙镂空蕾丝性感连衣裙子',
     price: '399.00'
    },
    {
     id: 2,
     img: 'static/a2.jpg',
     title: 'VERAMOON 亮片印花短袖连衣裙女夏甜美露背性感泡泡袖修身短裙',
     price: '689.00'
    },
    {
     id: 3,
     img: 'static/a3.jpg',
     title: 'famous 仙气木耳边紫色小碎花短裙a字雪纺连衣裙女',
     price: '199.00'
    },
    {
     id: 4,
     img: 'static/a4.jpg',
     title: '灰灰定制 2019春夏新款小香风粗花呢连衣裙女法式名媛复古短裙M家',
     price: '298.00'
    }
   ]
  }
 },
 methods:{
   deleteLine (index, id){
    console.log(id);
    
    this.dataList.splice(index, 1)
   }   
  }
}
</script>

注意实际应用中数据源可用异步加载,在删除的时候或许要异步请求后端来真正完成删除操作。

总结

以上所述是小编给大家介绍的使用Vue实现移动端左滑删除效果附源码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
jquery Moblie入门—hello world的示例代码学习
Jan 08 Javascript
javascript实现div的显示和隐藏的小例子
Jun 25 Javascript
jQuery控制的不同方向的滑动(向左、向右滑动等)
Jul 18 Javascript
JS实现单击输入框弹出选择框效果完整实例
Dec 14 Javascript
JS实现根据文件字节数返回文件大小的方法
Aug 02 Javascript
AngularJS使用ng-inlude指令加载页面失败的原因与解决方法
Jan 19 Javascript
基于Swiper实现移动端页面图片轮播效果
Dec 28 Javascript
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 jQuery
基于Vue实现关键词实时搜索高亮显示关键词
Jul 21 Javascript
解决vue无法设置滚动位置的问题
Oct 07 Javascript
vue 路由meta 设置导航隐藏与显示功能的示例代码
Sep 04 Javascript
vue中使用vue-pdf的方法详解
Sep 05 Javascript
Vue2.0实现组件之间数据交互和通信操作示例
May 16 #Javascript
Mpvue中使用Vant Weapp组件库的方法步骤
May 16 #Javascript
JS左右无缝轮播功能完整实例
May 16 #Javascript
Node.js Windows Binary二进制文件安装方法
May 16 #Javascript
详解mpvue中使用vant时需要注意的onChange事件的坑
May 16 #Javascript
详解如何搭建mpvue框架搭配vant组件库的小程序项目
May 16 #Javascript
微信端调取相册和摄像头功能,实现图片上传,并上传到服务器
May 16 #Javascript
You might like
PHPMYADMIN 简明安装教程 推荐
2010/03/07 PHP
range 标准化之获取
2011/08/28 Javascript
js实现拖拽 闭包函数详细介绍
2012/11/25 Javascript
今天是星期几的4种JS代码写法
2013/09/17 Javascript
JQuery查找DOM节点的方法
2015/06/11 Javascript
js实现简单折叠、展开菜单的方法
2015/08/28 Javascript
轻松学习jQuery插件EasyUI EasyUI实现树形网络基本操作(2)
2015/11/30 Javascript
关于javascript中限定时间内防止按钮重复点击的思路详解
2016/08/16 Javascript
bootstrap datepicker限定可选时间范围实现方法
2016/09/28 Javascript
Jquery Easyui选项卡组件Tab使用详解(10)
2016/12/18 Javascript
BootStrapValidator初使用教程详解
2017/02/10 Javascript
jquery拖动改变div大小
2017/07/04 jQuery
用nodejs实现json和jsonp服务的方法
2017/08/25 NodeJs
JS中的BOM应用
2018/02/02 Javascript
js实现QQ邮箱邮件拖拽删除功能
2020/08/27 Javascript
ant design vue嵌套表格及表格内部编辑的用法说明
2020/10/28 Javascript
[15:58]DOTA2国际邀请赛采访专栏:Tongfu.Sansheng&KingJ,DK.rOtk
2013/08/08 DOTA
python中关于时间和日期函数的常用计算总结(time和datatime)
2013/03/08 Python
python批量导出导入MySQL用户的方法
2013/11/15 Python
使用Python读取大文件的方法
2018/02/11 Python
Python3数据库操作包pymysql的操作方法
2018/07/16 Python
实例详解Python模块decimal
2019/06/26 Python
python网络爬虫 Scrapy中selenium用法详解
2019/09/28 Python
在Python3.74+PyCharm2020.1 x64中安装使用Kivy的详细教程
2020/08/07 Python
Python Pandas数据分析工具用法实例
2020/11/05 Python
css3 transform 3d 使用css3创建动态3d立方体(html5实践)
2013/01/06 HTML / CSS
HTML5无刷新改变当前url的代码
2017/03/15 HTML / CSS
美国玩具公司:U.S.Toy
2018/05/19 全球购物
一道Delphi面试题
2016/10/28 面试题
机械设计制造专业个人求职信
2013/09/25 职场文书
成人毕业生自我鉴定
2013/10/18 职场文书
项目管理计划书
2014/01/09 职场文书
python开发飞机大战游戏
2021/07/15 Python
Python MNIST手写体识别详解与试练
2021/11/07 Python
Pygame Rect区域位置的使用(图文)
2021/11/17 Python
Pygame Time时间控制的具体使用详解
2021/11/17 Python