基于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打开新窗口的2种方式
Apr 18 Javascript
浏览器打开层自动缓慢展开收缩实例代码
Jul 04 Javascript
DIV+CSS+jQ实现省市联动可扩展
Jun 22 Javascript
微信小程序 location API实例详解
Oct 02 Javascript
javascript笔记之匿名函数和闭包
Feb 06 Javascript
AngularJS实用基础知识_入门必备篇(推荐)
Jul 10 Javascript
jquery ajax异步提交表单数据的方法
Oct 27 jQuery
微信小程序之圆形进度条实现思路
Feb 22 Javascript
微信小程序HTTP接口请求封装的实现
Feb 21 Javascript
JavaScript算法学习之冒泡排序和选择排序
Nov 02 Javascript
超简单的微信小程序轮播图
Nov 22 Javascript
微信域名检测接口调用演示步骤(含PHP、Python)
Dec 08 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
phpmail类发送邮件函数代码
2012/02/20 PHP
PHP实现变色验证码实例
2014/01/06 PHP
PHP的运行机制与原理(底层)
2015/11/16 PHP
浅析PHP数据导出知识点
2018/02/17 PHP
document 和 document.all 分别什么时候用
2006/06/22 Javascript
发两个小东西,ASP/PHP 学习工具。 用JavaScript写的
2007/04/12 Javascript
window.open被浏览器拦截后的自定义提示效果代码
2007/11/19 Javascript
Prototype RegExp对象 学习
2009/07/19 Javascript
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
2013/06/24 Javascript
父页面显示遮罩层弹出半透明状态的dialog
2014/03/04 Javascript
asp知识整理笔记3(问答模式)
2015/09/27 Javascript
javascript中checkbox使用方法实例演示
2015/11/19 Javascript
JavaScript面向对象程序设计教程
2016/03/29 Javascript
JavaScript实现类似拉勾网的鼠标移入移出效果
2016/10/27 Javascript
解决jQuery ajax动态新增节点无法触发点击事件的问题
2017/05/24 jQuery
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
2017/08/10 Javascript
Vuex 模块化使用详解
2019/07/31 Javascript
详解小程序如何改变onLoad的执行时机
2019/11/01 Javascript
[04:46]2018年度玩家喜爱的电竞媒体-完美盛典
2018/12/16 DOTA
实例讲解Python中函数的调用与定义
2016/03/14 Python
python实现按行切分文本文件的方法
2016/04/18 Python
搭建Python的Django框架环境并建立和运行第一个App的教程
2016/07/02 Python
Python2.7基于淘宝接口获取IP地址所在地理位置的方法【测试可用】
2017/06/07 Python
Python从零开始创建区块链
2018/03/06 Python
Python实现ping指定IP的示例
2018/06/04 Python
python PrettyTable模块的安装与简单应用
2019/01/11 Python
scrapy-redis的安装部署步骤讲解
2019/02/27 Python
Python实现钉钉/企业微信自动打卡的示例代码
2021/02/02 Python
PyQt5通过信号实现MVC的示例
2021/02/06 Python
英国领先的男士服装和时尚零售商:Burton
2017/01/09 全球购物
奥地利婴儿用品和玩具购物网站:baby-markt.at
2020/01/26 全球购物
迪卡侬(Decathlon)加拿大官网:源自法国的运动专业超市
2020/11/22 全球购物
公司综合部的成员自我评价分享
2013/11/05 职场文书
汽车机电维修工求职信
2014/09/30 职场文书
合同权益转让协议书模板
2014/11/18 职场文书
Mysql数据库按时间点恢复实战记录
2021/06/30 MySQL