使用Vue怎么实现QQ左滑删除组件功能

这篇文章给大家介绍使用Vue怎么实现QQ左滑删除组件功能，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

实现思路

具体实现思路如下：

• 布局方面我采用的是 rem + flex 布局，具体如何结构和样式可以参考我的代码，值得注意的是后面的删除按钮是我通过定位放在了每一行的最后，超出隐藏了而已

• 左滑和右滑是通过 touchstart 和 touchend 事件，通过判断滑动开始和结束，水平方向 x 的偏移量，如果大于一定得阈值认为是左滑动，小于一定的阈值则认为是右滑动

• 左滑动和右滑动分别都是通过父级 li 元素的 translate 偏移量进行变化的，这里我的实现方式是提前声明好样式，通过改变当前父级 li 的 type 值，进行样式切换

• 点击某一个滑块的时候，首先判断当前所有的滑块是否有处于 滑出状态的 ，如果有，则必须先将所有的滑块状态还原，如果没有，则点击生效，我这里只是弹出一个 alter ，具体业务可以根据实际填写

• 删除相对简单，当滑块画出后，出现删除按钮，点击按钮，拿到当前的数组索引值，通过数组的 splice 方法，删除对应的数组值即可

具体实现

Html代码

<div class="container">   <div class="page-title">滑动组件</div>   <ul>     <li class="list-item " v-for="(item,index) in list " data-type="0">       <div class="list-box" @touchstart.capture="touchStart" @touchend.capture="touchEnd" @click="skip">         <img class="list-img" :src="item.imgUrl" >         <div class="list-content">           <p class="title">{{item.title}}</p>           <p class="tips">{{item.tips}}</p>           <p class="time">{{item.time}}</p>         </div>       </div>       <div class="delete" @click="deleteItem" :data-index="index">删除</div>     </li>   </ul> </div>

注意：我这里的数据全是本地 mock 的~

Css样式代码

.page-title{   text-align: center;   font-size: 17px;   padding: 10px 15px;   position: relative; } .page-title:after{   content: " ";   position: absolute;   left: 0;   bottom: 0;   right: 0;   height: 1px;   border-bottom: 1px solid #ccc;   color: #ccc;   -webkit-transform-origin: 0 100%;   transform-origin: 0 100%;   -webkit-transform: scaleY(0.5);   transform: scaleY(0.5);   z-index: 2; } .list-item{   position: relative;   height: 1.6rem;   -webkit-transition: all 0.2s;   transition: all 0.2s; } .list-item[data-type="0"]{   transform: translate3d(0,0,0); } .list-item[data-type="1"]{   transform: translate3d(-2rem,0,0); } .list-item:after{   content: " ";   position: absolute;   left: 0.2rem;   bottom: 0;   right: 0;   height: 1px;   border-bottom: 1px solid #ccc;   color: #ccc;   -webkit-transform-origin: 0 100%;   transform-origin: 0 100%;   -webkit-transform: scaleY(0.5);   transform: scaleY(0.5);   z-index: 2; } .list-box{   padding: 0.2rem;   background: #fff;   display: flex;   align-items: center;   -webkit-box-sizing: border-box;   box-sizing: border-box;   justify-content: flex-end;   position: absolute;   top: 0;   right: 0;   bottom: 0;   left: 0;   font-size: 0; } .list-item .list-img{   display: block;   width: 1rem;   height: 1rem; } .list-item .list-content{   padding: 0.1rem 0 0.1rem 0.2rem;   position: relative;   flex: 1;   flex-direction: column;   align-items: flex-start;   justify-content: center;   overflow: hidden; } .list-item .title{   display: block;   color: #333;   overflow: hidden;   font-size: 15px;   font-weight: bold;   text-overflow: ellipsis;   white-space: nowrap; } .list-item .tips{   display: block;   overflow: hidden;   font-size: 12px;   color: #999;   line-height: 20px;   text-overflow: ellipsis;   white-space: nowrap; } .list-item .time{   display: block;   font-size: 12px;   position: absolute;   right: 0;   top: 0.1rem;   color: #666; } .list-item .delete{   width: 2rem;   height: 1.6rem;   background: #ff4949;   font-size: 17px;   color: #fff;   text-align: center;   line-height: 1.6rem;   position: absolute;   top:0;   right: -2rem; }

这是核心的样式代码，还有部分样式重置代码放在了 App.vue 里，通过计算根节点 html 的字体大小的脚本我放在了 index.html 中~

js代码

export default{  name: 'index',  data () {  return {   list : [   {    title : 'Chrome更新了' ,    imgUrl : './static/images/Chrome.png' ,    tips : '不再支持Flash视频播放' ,    time : '上午 8:30'   },   {    title : '电影新资讯' ,    imgUrl : './static/images/Sina.png' ,    tips : '电影《红海行动》上映以来票房暴涨，很多国人表示对国产电影有了新的改观' ,    time : '上午 12:00'   },         {    title : '聚焦两会·共筑中国梦' ,    imgUrl : './static/images/video.png' ,    tips : '习近平代表的两会故事' ,    time : '下午 17:45'         },         {    title : '微信团队' ,    imgUrl : './static/images/Wechat.png' ,    tips : '您的帐号有异常登录，如非本人操作，请及时修改密码' ,    time : '昨天'         }   ],   startX : 0 ,   endX : 0 ,  }  },  methods : {  //跳转  skip(){   if( this.checkSlide() ){   this.restSlide();       }else{   alert('You click the slide!')       }  },  //滑动开始  touchStart(e){    // 记录初始位置   this.startX = e.touches[0].clientX;  },  //滑动结束  touchEnd(e){             // 当前滑动的父级元素   let parentElement = e.currentTarget.parentElement;   // 记录结束位置   this.endX = e.changedTouches[0].clientX;             // 左滑   if( parentElement.dataset.type == 0 && this.startX - this.endX > 30 ){   this.restSlide();   parentElement.dataset.type = 1;   }             // 右滑   if( parentElement.dataset.type == 1 && this.startX - this.endX < -30 ){   this.restSlide();   parentElement.dataset.type = 0;   }   this.startX = 0;   this.endX = 0;  },     //判断当前是否有滑块处于滑动状态     checkSlide(){   let listItems = document.querySelectorAll('.list-item');   for( let i = 0 ; i < listItems.length ; i++){   if( listItems[i].dataset.type == 1 ) {    return true;         }   }   return false;     },  //复位滑动状态  restSlide(){   let listItems = document.querySelectorAll('.list-item');              // 复位   for( let i = 0 ; i < listItems.length ; i++){   listItems[i].dataset.type = 0;   }  },  //删除  deleteItem(e){    // 当前索引   let index = e.currentTarget.dataset.index;   // 复位   this.restSlide();   // 删除   this.list.splice(index,1);  }  } }

Vue的优点

Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势，Vue中页面使用的是局部刷新，不用每次跳转页面都要请求所有数据和dom，可以大大提升访问速度和用户体验。

关于使用Vue怎么实现QQ左滑删除组件功能就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。