基于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 相关文章推荐
免费空间广告万能消除代码
Sep 04 Javascript
基于jquery的Repeater实现代码
Jul 17 Javascript
页面元素绑定jquery toggle后元素隐藏的解决方法
Mar 27 Javascript
在JavaScript的jQuery库中操作AJAX的方法讲解
Aug 15 Javascript
JSP防止网页刷新重复提交数据的几种方法
Nov 19 Javascript
微信小程序之数据缓存的实例详解
Sep 29 Javascript
JavaScript设计模式之命令模式实例分析
Jan 16 Javascript
在vue项目中引入vue-beauty操作方法
Feb 11 Javascript
vuejs移动端实现div拖拽移动
Jul 25 Javascript
JavaScript onclick事件使用方法详解
May 15 Javascript
小程序实现可拖动的悬浮按钮
Sep 07 Javascript
vue大型项目之分模块运行/打包的实现
Sep 21 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面向对象全攻略 (十一)__toString()用法 克隆对象 __call处理调用错误
2009/09/30 PHP
PHP中echo和print的区别
2014/08/28 PHP
php ActiveMQ的安装与使用方法图文教程
2020/02/23 PHP
Thinkphp 框架扩展之应用模式实现方法分析
2020/04/27 PHP
jQuery打印指定区域Html页面并自动分页
2014/07/04 Javascript
JS实现随页面滚动显示/隐藏窗口固定位置元素
2016/02/26 Javascript
全面了解JavaScript的数据类型转换
2016/07/01 Javascript
写给vue新手们的vue渲染页面教程
2017/09/01 Javascript
JavaScript继承定义与用法实践分析
2018/05/28 Javascript
vue+express 构建后台管理系统的示例代码
2018/07/19 Javascript
基于vue 动态菜单 刷新空白问题的解决
2020/08/06 Javascript
JavaScript 实现下雪特效的示例代码
2020/09/09 Javascript
Python利用pyHook实现监听用户鼠标与键盘事件
2014/08/21 Python
python基础教程之自定义函数介绍
2014/08/29 Python
Python常用的日期时间处理方法示例
2015/02/08 Python
python计算文本文件行数的方法
2015/07/06 Python
Python对list列表结构中的值进行去重的方法总结
2016/05/07 Python
Python实现字典去除重复的方法示例
2017/07/31 Python
Python3处理HTTP请求的实例
2018/05/10 Python
Python 加密与解密小结
2018/12/06 Python
解决Pycharm 包已经下载,但是运行代码提示找不到模块的问题
2019/08/31 Python
python使用openCV遍历文件夹里所有视频文件并保存成图片
2020/01/14 Python
Python importlib动态导入模块实现代码
2020/04/16 Python
canvas实现俄罗斯方块的方法示例
2018/12/13 HTML / CSS
html5中地理位置定位api接口开发应用小结
2013/01/04 HTML / CSS
Html5 webRTC简单实现视频调用的示例代码
2020/09/23 HTML / CSS
俄罗斯最大的消费电子连锁零售商:Mvideo
2017/06/25 全球购物
韩国美国时尚服装和美容在线全球市场:KOODING
2018/11/07 全球购物
澳大利亚床上用品、浴巾和家居用品购物网站:Bambury
2020/04/16 全球购物
阿迪达斯越南官网:adidas越南
2020/07/19 全球购物
爱与责任演讲稿
2014/05/20 职场文书
校园环保广播稿(3篇)
2014/09/15 职场文书
常务副县长“四风”个人对照检查材料思想汇报
2014/10/02 职场文书
jQuery实现影院选座订座效果
2021/04/13 jQuery
python-for x in range的用法(注意要点、细节)
2021/05/10 Python
Nginx如何获取自定义请求header头和URL参数详解
2022/07/23 Servers