基于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 相关文章推荐
js 利用className得到对象的实现代码
Nov 15 Javascript
Jquery attr(&quot;checked&quot;) 返回checked或undefined 获取选中失效
Oct 10 Javascript
通过location.replace禁止浏览器后退防止重复提交
Sep 04 Javascript
非jQuery实现照片散落桌子上,单击放大的LightBox效果
Nov 28 Javascript
javascript 实现map集合
Apr 03 Javascript
javascript实现淘宝幻灯片广告展示效果
Apr 27 Javascript
Jquery使用css方法改变样式实例
May 18 Javascript
jQuery实现鼠标选文字发新浪微博的方法
Apr 02 Javascript
Vuejs仿网易云音乐实现听歌及搜索功能
Mar 30 Javascript
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
May 15 jQuery
js canvas实现二维码和图片合成的海报
Nov 19 Javascript
vue 使用async写数字动态加载效果案例
Jul 18 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
附件名前加网站名
2008/03/23 PHP
详解PHP 7.4 中数组延展操作符语法知识点
2019/07/19 PHP
一些不错的js函数ajax
2008/08/20 Javascript
jQuery 页面载入进度条实现代码
2009/02/08 Javascript
js计算页面刷新的次数
2009/07/20 Javascript
jquery中对表单的基本操作代码
2010/07/29 Javascript
JavaScript 命名空间 使用介绍
2013/08/29 Javascript
javaScript如何生成xmlhttp
2013/12/16 Javascript
js导航栏单击事件背景变换示例代码
2014/01/13 Javascript
javascript中tostring()和valueof()的用法及两者的区别
2015/11/16 Javascript
IONIC自定义subheader的最佳解决方案
2016/09/22 Javascript
利用React-router+Webpack快速构建react程序
2016/10/27 Javascript
不使用script导入js文件的几种方法
2016/10/27 Javascript
jQuery简单自定义图片轮播插件及用法示例
2016/11/21 Javascript
JavaScript中return用法示例
2016/11/29 Javascript
ES6新特性七:数组的扩充详解
2017/04/21 Javascript
PHP7新特性简述
2017/06/11 Javascript
解读ES6中class关键字
2017/11/20 Javascript
laydate日历控件使用方法详解
2017/11/20 Javascript
JS深入学习之数组对象排序操作示例
2020/05/01 Javascript
vue引入静态js文件的方法
2020/06/20 Javascript
[01:58]DOTA2上海特级锦标赛现场采访:RTZ这个ID到底好不好
2016/03/25 DOTA
在Python中用has_key()方法查找键是否存在的教程
2015/05/21 Python
详解Python中的__new__、__init__、__call__三个特殊方法
2016/06/02 Python
python实现二分查找算法
2017/09/21 Python
python实现控制电脑鼠标和键盘,登录QQ的方法示例
2019/07/06 Python
Python + OpenCV 实现LBP特征提取的示例代码
2019/07/11 Python
HTML5+CSS3绘制锯齿状的矩形
2016/03/01 HTML / CSS
Html5新标签datalist实现输入框与后台数据库数据的动态匹配
2017/05/18 HTML / CSS
企业文化口号
2014/06/12 职场文书
教师自我剖析材料范文
2014/09/30 职场文书
教师师德表现自我评价
2015/03/05 职场文书
Python爬虫实战之爬取携程评论
2021/06/02 Python
java设计模式--建造者模式详解
2021/07/21 Java/Android
python游戏开发之pygame实现接球小游戏
2022/04/22 Python
ant design charts 获取后端接口数据展示
2022/05/25 Javascript