使用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 相关文章推荐
浏览器页面区域大小的js获取方法
Sep 21 Javascript
javascript正则表达式使用replace()替换手机号的方法
Jan 19 Javascript
jquery小火箭返回顶部代码分享
Aug 19 Javascript
JS闭包用法实例分析
Mar 27 Javascript
JS实现留言板功能
Jun 17 Javascript
JS数组操作之增删改查的简单实现
Aug 21 Javascript
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 jQuery
如何使用 vue + d3 画一棵树
Dec 03 Javascript
Vue组件之高德地图地址选择功能的实例代码
Jun 21 Javascript
解决vue-router 切换tab标签关闭时缓存问题
Jul 22 Javascript
vue键盘事件点击事件加native操作
Jul 27 Javascript
JS删除对象中某一属性案例详解
Sep 08 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
无数据库的详细域名查询程序PHP版(5)
2006/10/09 PHP
php入门之连接mysql数据库的一个类
2012/04/21 PHP
服务器变量 $_SERVER 的深入解析
2013/07/02 PHP
php三种实现多线程类似的方法
2015/10/30 PHP
PHP实现权限管理功能示例
2017/09/22 PHP
php中目录操作opendir()、readdir()及scandir()用法示例
2019/06/08 PHP
JavaScript 10件让人费解的事情
2010/02/15 Javascript
基于jquery实现一张图片点击鼠标放大再点缩小
2013/09/29 Javascript
Javascript中的高阶函数介绍
2015/03/15 Javascript
实现高性能JavaScript之执行与加载
2016/01/30 Javascript
javascript 开发之百度地图使用到的js函数整理
2017/05/19 Javascript
nodejs mysql 实现分页的方法
2017/06/06 NodeJs
使用InstantClick.js让页面提前加载200ms
2017/09/12 Javascript
vue中axios解决跨域问题和拦截器的使用方法
2018/03/07 Javascript
JavaScript引用类型Array实例分析
2018/07/24 Javascript
axios取消请求的实践记录分享
2018/09/26 Javascript
微信小程序实现顶部下拉菜单栏
2018/11/04 Javascript
[50:48]LGD vs CHAOS 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python中from module import * 的一个坑
2014/07/20 Python
python下载文件记录黑名单的实现代码
2017/10/24 Python
python selenium自动上传有赞单号的操作方法
2018/07/05 Python
python 使用turtule绘制递归图形(螺旋、二叉树、谢尔宾斯基三角形)
2019/05/30 Python
浅谈pc和移动端的响应式的使用
2019/01/03 HTML / CSS
远程Wi-Fi宠物监控相机:Petcube
2017/04/26 全球购物
美国在线购买空气净化器、除湿器、加湿器网站:AllergyBuyersClub
2021/03/16 全球购物
Sahajan美国:阿育吠陀护肤品牌
2021/01/09 全球购物
酒店管理专业毕业生推荐信
2013/11/10 职场文书
房地产还款计划书
2014/01/10 职场文书
玲玲的画教学反思
2014/02/04 职场文书
申论倡议书范文
2014/05/13 职场文书
电子信息工程专业求职信
2014/06/28 职场文书
工作检讨书大全
2015/01/26 职场文书
罚款通知怎么写
2015/04/22 职场文书
辩护词格式
2015/05/22 职场文书
朋友圈早安励志语录!
2019/07/08 职场文书
JavaScript事件的委托(代理)的用法示例详解
2022/02/18 Javascript