基于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中的constructor和prototype
Apr 07 Javascript
JS打开新窗口的2种方式
Apr 18 Javascript
JS阻止冒泡事件以及默认事件发生的简单方法
Jan 17 Javascript
Node.js中使用mongoskin操作mongoDB实例
Sep 28 Javascript
理解javascript异步编程
Jan 27 Javascript
JavaScript组件开发之输入框加候选框
Mar 10 Javascript
JavaScript实现简单图片轮播效果
Aug 21 Javascript
详解angular2 控制视图的封装模式
Dec 27 Javascript
extract-text-webpack-plugin用法详解
Feb 14 Javascript
vue自定义js图片碎片轮播图切换效果的实现代码
Apr 28 Javascript
Vue替代marquee标签超出宽度文字横向滚动效果
Dec 09 Javascript
全网小程序接口请求封装实例代码
Nov 06 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+ajax实时输入自动搜索匹配的方法
2014/12/26 PHP
PHP抓取淘宝商品的用户晒单评论+图片+搜索商品列表实例
2016/04/14 PHP
PHP带节点操作的无限分类实现方法详解
2016/11/09 PHP
PHP防止图片盗用(盗链)的方法小结
2016/11/11 PHP
搜索附近的人PHP实现代码
2018/02/11 PHP
PHP5.0~5.6 各版本兼容性cURL文件上传功能实例分析
2018/05/11 PHP
jquery.cvtooltip.js 基于jquery的气泡提示插件
2010/11/19 Javascript
TextArea不支持maxlength的解决办法(jquery)
2011/09/13 Javascript
js Function类型
2011/12/04 Javascript
JavaScript使用setInterval()函数实现简单轮询操作的方法
2015/02/02 Javascript
理解Angular数据双向绑定
2016/01/10 Javascript
JS组件Form表单验证神器BootstrapValidator
2016/01/26 Javascript
怎样判断jQuery当前元素是隐藏还是显示
2016/11/23 Javascript
js数字计算 误差问题的快速解决方法
2017/02/28 Javascript
vue调用高德地图实例代码
2017/04/28 Javascript
基于require.js的使用(实例讲解)
2017/09/07 Javascript
jQuery实现判断上传图片类型和大小的方法示例
2018/04/11 jQuery
微信小程序实现的五星评价功能示例
2019/04/25 Javascript
vue中$refs, $emit, $on, $once, $off的使用详解
2019/05/26 Javascript
原生JS实现贪吃蛇小游戏
2020/03/09 Javascript
Javascript ParentNode和ChildNode接口原理解析
2020/03/16 Javascript
nuxt 页面路由配置,主页轮播组件开发操作
2020/11/05 Javascript
[04:44]DOTA2 2017全国高校联赛视频回顾
2017/08/21 DOTA
[56:57]LGD vs VP 2019DOTA2国际邀请赛淘汰赛 胜者组赛BO3 第一场 8.20.mp4
2019/08/22 DOTA
[48:00]完美世界DOTA2联赛循环赛 Forest vs Inki BO2第二场 11.04
2020/11/04 DOTA
关于pip的安装,更新,卸载模块以及使用方法(详解)
2017/05/19 Python
Python中if elif else及缩进的使用简述
2018/05/31 Python
Python split() 函数拆分字符串将字符串转化为列的方法
2019/07/16 Python
英国最大的网上药品商店:Chemist Direct
2017/12/16 全球购物
董事长职责范文
2013/11/08 职场文书
个人简历自我评价
2014/01/06 职场文书
交通事故委托书范本(2篇)
2014/09/21 职场文书
地下停车场租赁协议范本
2014/10/07 职场文书
2016年保险公众宣传日活动总结
2016/04/05 职场文书
go语言中json数据的读取和写出操作
2021/04/28 Golang
golang slice元素去重操作
2021/04/30 Golang