基于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 相关文章推荐
google地图的路线实现代码
Aug 20 Javascript
详解JavaScript的while循环的使用
Jun 03 Javascript
理解Javascript的call、apply
Dec 16 Javascript
xtemplate node.js 的使用方法实例解析
Aug 22 Javascript
webpack打包后直接访问页面图片路径错误的解决方法
Jun 17 Javascript
详解webpack4多入口、多页面项目构建案例
May 25 Javascript
vue自定v-model实现表单数据双向绑定问题
Sep 03 Javascript
Vue数据双向绑定的深入探究
Nov 27 Javascript
layui表格分页 记录勾选的实例
Sep 02 Javascript
对layui初始化列表的CheckBox属性详解
Sep 13 Javascript
uni-app使用微信小程序云函数的步骤示例
May 22 Javascript
React Native项目框架搭建的一些心得体会
May 28 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.2时间相差8小时
2007/01/15 PHP
php中如何防止表单的重复提交
2013/08/02 PHP
PHP里8个鲜为人知的安全函数分析
2014/12/09 PHP
PHP环境搭建(php+Apache+mysql)
2016/11/14 PHP
PHP排序算法之快速排序(Quick Sort)及其优化算法详解
2018/04/21 PHP
PHP中常用的三种设计模式详解【单例模式、工厂模式、观察者模式】
2019/06/14 PHP
xtree.js 代码
2007/03/13 Javascript
在textarea中屏蔽js的某个function的javascript代码
2007/04/20 Javascript
Jquery 插件开发笔记整理
2011/01/17 Javascript
js操作CheckBoxList实现全选/反选(在客服端完成)
2013/02/02 Javascript
Jquery中val()表单取值赋值的实例代码
2013/08/15 Javascript
js兼容的placeholder属性详解
2013/08/18 Javascript
js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器
2015/02/11 Javascript
JavaScript实现跨浏览器的添加及删除事件绑定函数实例
2015/08/04 Javascript
详解如何使用webpack打包Vue工程
2017/05/27 Javascript
bootstrap多层模态框滚动条消失的问题
2017/07/21 Javascript
Angular4如何自定义首屏的加载动画详解
2017/07/26 Javascript
利用HBuilder打包前端开发webapp为apk的方法
2017/11/13 Javascript
vue this.reload 方法 配置
2018/09/12 Javascript
js实现动态添加上传文件页面
2018/10/22 Javascript
JavaScript数据结构与算法之检索算法示例【二分查找法、计算重复次数】
2019/02/22 Javascript
node(koa2) web应用模块介绍详解
2019/03/29 Javascript
vue路由跳转传参数的方法
2019/05/06 Javascript
微信小程序使用canvas自适应屏幕画海报并保存图片功能
2019/07/25 Javascript
Python中的字典与成员运算符初步探究
2015/10/13 Python
pandas实现选取特定索引的行
2018/04/20 Python
Python3基础教程之递归函数简单示例
2019/06/07 Python
wxPython实现绘图小例子
2019/11/19 Python
Selenium 安装和简单使用的实现
2020/12/04 Python
matplotlib绘制鼠标的十字光标的实现(内置方式)
2021/01/06 Python
外贸业务员的岗位职责
2013/11/23 职场文书
乡镇安全生产目标责任书
2014/07/23 职场文书
主要领导对照检查材料
2014/08/26 职场文书
2015年度房地产工作总结
2015/04/09 职场文书
小学生班干部竞选稿
2015/11/20 职场文书
MySQL的安装与配置详细教程
2021/06/26 MySQL