基于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 API学Jquery 之二 属性
Apr 09 Javascript
jQuery的实现原理的模拟代码 -5 Ajax
Aug 07 Javascript
js用闭包遍历树状数组的方法
Mar 19 Javascript
JavaScript中的fontsize()方法使用详解
Jun 08 Javascript
整理Javascript基础语法学习笔记
Nov 29 Javascript
PhotoSwipe异步动态加载图片方法
Aug 25 Javascript
微信小程序 实现动态显示和隐藏某个控件
Apr 27 Javascript
vue 实现搜索的结果页面支持全选与取消全选功能
May 10 Javascript
vue 实现路由跳转时更改页面title
Nov 05 Javascript
详细分析vue响应式原理
Jun 22 Javascript
jQuery中event.target和this的区别详解
Aug 13 jQuery
vue+Element-ui实现登录注册表单
Nov 17 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
php smarty 二级分类代码和模版循环例子
2011/06/16 PHP
php 判断数组是几维数组
2013/03/20 PHP
php.ini修改php上传文件大小限制的方法详解
2013/06/17 PHP
PHP 线程安全与非线程安全版本的区别深入解析
2013/08/06 PHP
Yii操作数据库的3种方法
2014/03/11 PHP
php实现比较全的数据库操作类
2015/06/18 PHP
PHP Cookei记录用户历史浏览信息的代码
2016/02/03 PHP
详解php魔术方法(Magic methods)的使用方法
2016/02/14 PHP
php 多继承的几种常见实现方法示例
2019/11/18 PHP
php获取是星期几的的一些常用姿势
2019/12/15 PHP
PHP SESSION跨页面传递失败解决方案
2020/12/11 PHP
关于jQuery中的end()使用方法
2011/07/10 Javascript
jquery实现网页的页面平滑滚动效果代码
2015/11/02 Javascript
js采用concat和sort将N个数组拼接起来的方法
2016/01/21 Javascript
Javascript将数值转换为金额格式(分隔千分位和自动增加小数点)
2016/06/22 Javascript
详解js中的apply与call的用法
2016/07/30 Javascript
JS实现图片剪裁并预览效果
2016/08/12 Javascript
Bootstrap选项卡动态切换效果
2016/11/28 Javascript
JavaScript实现设置默认日期范围为最近40天的方法分析
2017/07/12 Javascript
小程序实现发表评论功能
2018/07/06 Javascript
JS 实现获取验证码 倒计时功能
2018/10/29 Javascript
vue项目中引入vue-datepicker插件的详解
2019/05/14 Javascript
layui-tree实现Ajax异步请求后动态添加节点的方法
2019/09/23 Javascript
详解element-ui级联菜单(城市三级联动菜单)和回显问题
2019/10/02 Javascript
从零学python系列之从文件读取和保存数据
2014/05/23 Python
python通过yield实现数组全排列的方法
2015/03/18 Python
Django应用程序中如何发送电子邮件详解
2017/02/04 Python
你还在@微信官方?聊聊Python生成你想要的微信头像
2019/09/25 Python
python使用正则表达式去除中文文本多余空格,保留英文之间空格方法详解
2020/02/11 Python
Python如何基于Tesseract实现识别文字功能
2020/06/05 Python
H5混合开发app如何升级的方法
2018/01/10 HTML / CSS
捷克浴室和厨房设备购物网站:SIKO
2018/08/11 全球购物
平安家庭示范户事迹
2014/06/02 职场文书
财政局党的群众路线教育实践活动整改方案
2014/09/21 职场文书
事业单位财务人员岗位职责
2015/04/14 职场文书
Python pandas读取CSV文件的注意事项(适合新手)
2021/06/20 Python