基于vue2实现左滑删除功能


Posted in Javascript onNovember 28, 2017

左滑删除,很多UI框架里有,比如Mint-UI, Muse-UI等,一开始我们就是用的这两个,但是我们需求是要:左滑的时候出现img然后来实现点击删除,如下:

基于vue2实现左滑删除功能

因为用UI框架,还得改底层代码= =所以,我们小组就直接写了一个- -,心累……此组件多地方使用,所以建议还是放到common下。。

<template>
  <div class="left-delete">
    <div class="move"
       @touchstart="_touchStart"
       @touchmove="_touchMove"
       @touchend="_touchEnd"
       :style="txtStyle">
      <slot></slot>
    </div>
    <div class="deleteIcon" :style="zIndex" @click.prevent="deleteItem(index)"></div>
  </div>
</template>

<script>
  export default {
    props: {
      index: Number
    },
    data() {
      return {
        startX: 0,    //触摸位置
         moveX: 0,    //滑动时的位置
         disX: 0,    //移动距离
         txtStyle: '',
        delWidth: 200,
        top: '',
        zIndex: 'z-index:-1',
      }
    },
    methods: {
      _touchStart: function(ev) {
        ev = ev || event;
        if(ev.touches.length == 1){
          // 手指按下的时候记录按下的位置
          this.startX = ev.touches[0].clientX;
          console.log(this.startX)
        }
      },
      _touchMove: function(ev) {
        ev = ev || event;
        if(ev.touches.length == 1) {
          // 滑动过程中的实时位置
          this.moveX = ev.touches[0].clientX
          // 滑动过程中实时计算滑动距离
          this.disX = this.startX - this.moveX;
          // console.log('disX==>',this.disX)
          // 如果是向右滑动或者只是点击,不改变滑动位置
          if(this.disX < 0 || this.disX == 0) {
            // console.log('没有移动');
            this.txtStyle = "transform:translateX(0rem)";
          }else if (this.disX > 0) {
如果是向左滑动,则实时给这个根元素一个向左的偏移-left,当偏移量到达固定值delWidth时,固定元素的偏移量为 delWidth
            this.txtStyle = "transform:translateX(-" + this.disX/100 + "rem)";
            if (this.disX >= this.delWidth/100) {
              this.txtStyle = "transform:translateX(-" + this.delWidth/100 + "rem)";
              this.zIndex = "z-index:" + 10 + "rem";
            }
          }
        }
      },
      _touchEnd: function(ev) {
        if (event.changedTouches.length == 1) {
          this.startX = 0;
          this.zIndex = "z-index:" + -1 + "rem";
          console.log(event.changedTouches[0].clientX)
          // 手指移动结束后的水平位置
          let endX = event.changedTouches[0].clientX;
          // 触摸开始与结束,手指移动的距离
          this.disX = this.startX - endX;
          //如果距离小于删除按钮的1/2,不显示删除按钮
        }
      },
      deleteItem: function(index) {
        this.$emit('deleteItem', index);
      }
    }
  }
</script>

<style>
  .left-delete{
    width:100%;
    height:100%;
    position:relative;
    z-index:2;
  }
  .move{
    position: relative;
  }
  .deleteIcon{
    width: 2rem;
    height:100%;
    position: absolute;
    right:0;
    top:0;
    background:url(./../../assets/main/4.png) no-repeat;
    background-size: contain;
  }
</style>

然后哪个页面需要,哪个页面引入就好。比如myCollect页面需要,那么如下:

<template>
  <section class="myCollect">
 <section>
      <div v-for="(item,index) in collectionList">
        <left-slider :index="index" @deleteItem="deleteItem">
          <Financial :item="item" :index="index"></Financial>
        </left-slider>
      </div>
    </section>
  </section>
</template>
<script>
  import api from './../../fetch/api';
  import { mapGetters } from 'vuex';

  import Financial from './../common/financial.vue';
  import LeftSlider from './../common/leftSlider.vue';

  export default {
    name: 'MyCollect',
    props: {
      item: Object,
      index: Number
    },
    components: {
      Financial,
      LeftSlider
    },
    data() {
      return {

      }
    },
    created() {
      this.getCollectionList();
    },
    methods: {

    },
    computed: {
        ...mapGetters([
          'getContextPathSrc',
          'sessionId',
          'token'
        ]),
  },
  methods: {
    // 删除
    deleteItem: function(index) {
      api.commonApi('后台接口,请求数据')//此处api是封装的axios,详情看文章:vue2+vuex+axios即可
          .then(res => {
        console.debug("REQ_ADD_STORE.res.data.result -> " + res.data.result);
      this.collectionList.splice(index, 1);
    });
    }
  },
  mounted() {

  }
  }
</script>

然后就完成了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery UI 1.72 之datepicker
Dec 29 Javascript
为Extjs加加速(javascript加速)
Aug 19 Javascript
JQuery动态给table添加、删除行 改进版
Jan 19 Javascript
解决js数据包含加号+通过ajax传到后台时出现连接错误
Aug 01 Javascript
ie浏览器使用js导出网页到excel并打印
Mar 11 Javascript
jQuery插件实现大图全屏图片相册
Mar 14 Javascript
JS实现图片平面旋转的方法
Mar 01 Javascript
JavaScript基础——使用Canvas绘图
Nov 02 Javascript
移动端基础事件总结与应用
Jan 12 Javascript
vue-devtools的安装和使用步骤详解
Oct 17 Javascript
JS控制下拉列表左右选择实例代码
May 08 Javascript
vue 需求 data中的数据之间的调用操作
Aug 05 Javascript
JavaScript生成简单等差数列
Nov 28 #Javascript
微信小程序用户自定义模版用法实例分析
Nov 28 #Javascript
vue2手机APP项目添加开屏广告或者闪屏广告
Nov 28 #Javascript
浅谈vue中慎用style的scoped属性
Nov 28 #Javascript
元素全屏的设置与监听实例
Nov 28 #Javascript
vue2实现数据请求显示loading图
Nov 28 #Javascript
Vue2仿淘宝实现省市区三级联动
Apr 15 #Javascript
You might like
理解PHP5中static和const关键字的区别
2007/03/19 PHP
php中magic_quotes_gpc对unserialize的影响分析
2014/12/16 PHP
如何在Laravel5.8中正确地应用Repository设计模式
2019/11/26 PHP
JavaScript表单常用验证集合
2008/01/16 Javascript
W3C Group的JavaScript1.8 新特性介绍
2009/05/19 Javascript
基于jquery实现的定时显示与隐藏div广告的实现代码
2013/08/22 Javascript
JavaScript中为什么null==0为false而null大于=0为true(个人研究)
2013/09/16 Javascript
JS仿百度搜索自动提示框匹配查询功能
2013/11/21 Javascript
node.js中的console用法总结
2014/12/15 Javascript
Bootstrap Table使用方法详解
2016/08/01 Javascript
jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍
2016/09/01 Javascript
JavaScript中清空数组的方法总结
2016/12/02 Javascript
JavaScript模块化之使用requireJS按需加载
2017/04/12 Javascript
JavaScript高阶函数_动力节点Java学院整理
2017/06/28 Javascript
vue-cli配置环境变量的方法
2018/07/09 Javascript
详解可以用在VS Code中的正则表达式小技巧
2019/05/14 Javascript
JS实现网页烟花动画效果
2020/03/10 Javascript
Element InfiniteScroll无限滚动的具体使用方法
2020/07/27 Javascript
Python3.5 Json与pickle实现数据序列化与反序列化操作示例
2019/04/29 Python
Django继承自带user表并重写的例子
2019/11/18 Python
Python socket处理client连接过程解析
2020/03/18 Python
django 读取图片到页面实例
2020/03/27 Python
DataFrame.groupby()所见的各种用法详解
2020/06/14 Python
PyQt5-QDateEdit的简单使用操作
2020/07/12 Python
python 通过 pybind11 使用Eigen加速代码的步骤
2020/12/07 Python
Css3新特性应用之视觉效果实例
2016/12/12 HTML / CSS
ReVive利维肤美国官网:RéVive Skincare
2018/04/18 全球购物
常用UNIX 命令(Linux的常用命令)
2013/07/10 面试题
教师职称自我鉴定
2014/02/12 职场文书
《东方明珠》教学反思
2014/04/20 职场文书
成绩单家长意见
2015/06/03 职场文书
python 爬取吉首大学网站成绩单
2021/06/02 Python
vue响应式原理与双向数据的深入解析
2021/06/04 Vue.js
SpringBoot整合MongoDB的实现步骤
2021/06/23 MongoDB
MySQL数据库之存储过程 procedure
2022/06/16 MySQL
Windows Server 2008配置防火墙策略详解
2022/06/28 Servers