vue移动端模仿qq左右滑动删除

移动端模仿qq左右滑动删除

1、页码效果图

2、左滑动

3、点击删除就可以删除该条信息了或者右滑动隐藏删除

4、源码：

   

<template>    <div class="tab_manage_wrap bg-fff">        <div class="tab_add">            <router-link to="/fans/tabadd" class="tab_title plr">                <i></i><span>新建标签</span>            </router-link>        </div>          <ul class="tab_manage bg-fff pl clearfix">            <li v-for="(todo, index) in todos">                <div :class="[{swipeleft: isSwipe[index]},'tab_manage_list left']" @touchstart.stop="created()" ref="child" :key="index">                    <p class="tab">{{ todo.title }}(<span>{{todo.num}}</span>)</p>                     <p class="tab_content text_hide">{{ todo.text }}</p>                </div>                <p class="tab_delete left" @click.stop="removeTodo(index)">删除</p>              </li>          </ul>      </div> </template>  <script>      /*        * 滑动配置。distance 滑动距离       */      export default({          data(){               return {           isSwipe: [false, false, false],                   todos: [                   { 'text': '范冰冰,范冰冰1,范冰冰2,范冰冰2','num':'3','title':'5月份收房'},                   { 'text': '邓超,邓超1,邓超2,邓超2','num':'3','title':'6月份收房'},                 { 'text': '赵丽颖,赵丽颖1,赵丽颖2,赵丽颖2,赵丽颖,赵丽颖1,赵丽颖2,赵丽颖2','num':'6','title':'7月份收房'},                 { 'text': '范冰冰,范冰冰1,范冰冰2,范冰冰2','num':'3','title':'8月份收房'}                ]            }          },         methods: {              removeTodo: function (index) {              this.todos.splice(index, 1);               this.isSwipe = [false, false, false]            },            created:function() {                setTimeout(() => {                   // 判断是否存在信息列表                   if (this.$refs.child) {                        this.$refs.child.forEach((element, index) => {                           let x, y, X, Y, swipeX, swipeY                           // 监听touchstart                            element.addEventListener('touchstart',function(e) {                                x = e.changedTouches[0].pageX                                y = e.changedTouches[0].pageY                                swipeX = true                                swipeY = true                                this.isSwipe = [false, false, false]                            })                            element.addEventListener('touchmove', e => {                                X = event.changedTouches[0].pageX                                Y = event.changedTouches[0].pageY                                if (swipeX && Math.abs(X - x) - Math.abs(Y - y) > 0) {                                  // 阻止默认事件                                  e.stopPropagation()                                  // 右滑                                  if (X - x > 10) {  //滑动间距                                    e.preventDefault()                                    this.isSwipe.splice(index, 1, false)                                  }                                  if (x - X > 10) {  //滑动间距                                    e.preventDefault()                                    this.isSwipe.splice(index, 1, true)                                  }                                  swipeY = false                                }                                if (swipeY && Math.abs(X - x) - Math.abs(Y - y) < 0) {                                  swipeX = false                                }                            })                        })                    }                }, 500)            }          }      })  </script>  <style scoped src="./tab_manage.css"></style>

/* 标签管理 */.tab_manage_wrap{width: 100%;height: 100%;}.tab_title{display: block;width: 100%;height: 2.56rem;border-bottom: 0.05rem solid #dedede;line-height: 2.56rem;position: relative;}.tab_title i{position: absolute;width: 0.64rem;height: 0.64rem;left: 0.426667rem;top: 0.96rem;background:url(add.png);background-size: 100% 100%;}.tab_title span{display: block;padding-left: 1.493333rem;font-size: 0.597333rem;color: #fe4d57;}.tab_manage{    width: 16rem;    margin: 0 auto;    overflow-x: hidden;    position: relative;}.tab_manage li{position: relative;width:18.56rem;height: 2.56rem;border-bottom: 0.05rem solid #dedede;}.tab_manage_list{height: 2.56rem;width: 15.573333rem;}.swipeleft.tab_manage_list{margin-left: -3rem;} .tab_manage li .tab{font-size: 0.64rem;    color: #555;    padding-top: 0.426667rem;    padding-bottom: 0.213333rem;}.tab_manage li .tab_content{font-size: 0.554667rem;color: #999;width: 15.36rem;}.tab_manage li .tab_delete{height: 2.56rem;width: 2.986667rem;line-height: 2.56rem;text-align: center;font-size: 0.725333rem;color: #fff;background-color: #fe4d57;}/* 标签管理 end */