使用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 相关文章推荐
pjblog中的UBBCode.js
Apr 25 Javascript
js实现类似于add(1)(2)(3)调用方式的方法
Mar 04 Javascript
Vue自定义指令介绍(2)
Dec 08 Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
Dec 31 Javascript
js 性能优化之算法和流程控制
Feb 15 Javascript
浅谈jquery拼接字符串效率比较高的方法
Feb 22 Javascript
深入学习 JavaScript中的函数调用
Mar 23 Javascript
微信小程序 数据遍历的实现
Apr 05 Javascript
高性能的javascript之加载顺序与执行原理篇
Jan 14 Javascript
Angular整合zTree的示例代码
Jan 24 Javascript
基于$.ajax()方法从服务器获取json数据的几种方式总结
Jan 31 Javascript
微信小程序indexOf的替换方法(推荐)
Jan 14 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
Windows 下的 PHP-PEAR 安装方法
2010/11/20 PHP
php中explode的负数limit用法分析
2015/02/27 PHP
PHP微信公众号自动发送红包API
2016/06/01 PHP
php出租房数据管理及搜索页面
2017/05/23 PHP
PHP基于堆栈实现的高级计算器功能示例
2017/09/15 PHP
2020最新版 PhpStudy V8.1版本下载安装使用详解
2020/10/30 PHP
js实现DIV的一些简单控制
2007/06/04 Javascript
jquery ajax提交表单数据的两种方式
2009/11/24 Javascript
jquery 锁定弹出层实现代码
2010/02/23 Javascript
Extjs4 消息框去掉关闭按钮(类似Ext.Msg.alert)
2013/04/02 Javascript
javascript函数重载解决方案分享
2014/02/19 Javascript
基于jQuery实现点击弹出层实例代码
2016/01/01 Javascript
微信小程序request出现400的问题解决办法
2017/05/23 Javascript
Node.js中你不可不精的Stream(流)
2018/06/08 Javascript
JavaScript对象的浅拷贝与深拷贝实例分析
2018/07/25 Javascript
Javascript实现秒表倒计时功能
2018/11/17 Javascript
配置eslint规范项目代码风格
2019/03/11 Javascript
[16:01]夜魇凡尔赛茶话会 第二期01:你比划我猜
2021/03/11 DOTA
Python3.x和Python2.x的区别介绍
2013/02/12 Python
使用python调用浏览器并打开一个网址的例子
2014/06/05 Python
python中__call__内置函数用法实例
2015/06/04 Python
使用Python下载歌词并嵌入歌曲文件中的实现代码
2015/11/13 Python
详解pandas.DataFrame中删除包涵特定字符串所在的行
2019/04/04 Python
python paramiko远程服务器终端操作过程解析
2019/12/14 Python
有关Tensorflow梯度下降常用的优化方法分享
2020/02/04 Python
html5 css3 动态气泡按钮实例演示
2012/12/02 HTML / CSS
详解通过HTML5 Canvas实现图片的平移及旋转变化的方法
2016/03/22 HTML / CSS
美国知名的在线旅游服务网站:Priceline
2016/07/23 全球购物
泰国第一的化妆品网站:Konvy
2018/02/25 全球购物
Yummie官方网站:塑身衣和衣柜必需品
2019/10/29 全球购物
什么是岗位职责
2013/11/12 职场文书
三分钟演讲稿事例
2014/03/03 职场文书
贷款委托书
2014/08/01 职场文书
八一建军节演讲稿
2014/09/10 职场文书
项目委托协议书(最新)
2014/09/13 职场文书
python超详细实现完整学生成绩管理系统
2022/03/17 Python