Vue 仿QQ左滑删除组件功能


Posted in Javascript onMarch 12, 2018

前几天在做Vue项目开发的时候,因为之前别人写的代码有点小 bug,有人反应 IOS 上面的滑动点击有点问题,于是让我来帮忙解决,我看了看以前的代码实现比较繁琐,冗余,索性就直接自己重新写了一套,供大家参考,如有更好的方式,欢迎及时交流~

我们先看看效果图吧,毕竟无图无真相啊~

效果图

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" alt="">
        <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);
 }
 }
}

js代码就这么一些,每个函数都有注释说明, 相信都能看得懂, 就不多解释了。

结语

怎么样,是不是也米有想象中的那么难,只要理清思路即可,实现起来也并不是那么困难,当然我这里写的只是我的一个实现思路而已,可能你们自己会有更好的实现方式,为什么不拿出来分享呢?

完整代码我已经托管到 gitlub 上了,欢迎下载使用并留言!

Javascript 相关文章推荐
jquery HotKeys轻松搞定键盘事件代码
Aug 30 Javascript
jquery的键盘事件修改代码
Feb 24 Javascript
javascript学习笔记(十一) 正则表达式介绍
Jun 20 Javascript
javascript模拟地球旋转效果代码实例
Dec 02 Javascript
学习Javascript面向对象编程之封装
Feb 23 Javascript
jQuery 如何给Carousel插件添加新的功能
Apr 18 Javascript
JavaScript中的prototype原型学习指南
May 09 Javascript
Vue.js 2.0 和 React、Augular等其他前端框架大比拼
Oct 08 Javascript
JS控件bootstrap datepicker使用方法详解
Mar 25 Javascript
Webpack打包css后z-index被重新计算的解决方法
Jun 18 Javascript
JavaScript创建对象的常用方式总结
Aug 10 Javascript
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
May 13 jQuery
JS中touchstart事件与click事件冲突的解决方法
Mar 12 #Javascript
Node.JS循环删除非空文件夹及子目录下的所有文件
Mar 12 #Javascript
Javascript中prototype与__proto__的关系详解
Mar 11 #Javascript
js中document.write和document.writeln的区别
Mar 11 #Javascript
Javascript 编码约定(编码规范)
Mar 11 #Javascript
JavaScript获取移动设备型号的实现代码(JS获取手机型号和系统)
Mar 10 #Javascript
js经验分享 JavaScript反调试技巧
Mar 10 #Javascript
You might like
小文件php+SQLite存储方案
2010/09/04 PHP
js 日期比较相关天数代码
2014/04/02 Javascript
jQuery中的$.ajax()方法应用
2014/05/06 Javascript
JavaScript中的公有、私有、特权和静态成员用法分析
2014/11/20 Javascript
jQuery scrollFix滚动定位插件
2015/04/01 Javascript
深入讲解AngularJS中的自定义指令的使用
2015/06/18 Javascript
关于JavaScript 原型链的一点个人理解
2016/07/31 Javascript
js实现统计字符串中特定字符出现个数的方法
2016/08/02 Javascript
js两种拼接字符串的简单方法(必看)
2016/09/02 Javascript
浅谈React Native 中组件的生命周期
2017/09/08 Javascript
详解Webpack+Babel+React开发环境的搭建的方法步骤
2018/01/09 Javascript
layui table 参数设置方法
2018/08/14 Javascript
JavaScript this关键字指向常用情况解析
2020/09/02 Javascript
[37:35]DOTA2上海特级锦标赛A组资格赛#1 Secret VS MVP.Phx第二局
2016/02/25 DOTA
Python自动化开发学习之三级菜单制作
2017/07/14 Python
Python实现调度算法代码详解
2017/12/01 Python
Python爬虫设置代理IP的方法(爬虫技巧)
2018/03/04 Python
通过Python模块filecmp 对文件比较的实现方法
2018/06/29 Python
利用python脚本如何简化jar操作命令
2019/02/24 Python
Python使用Pandas对csv文件进行数据处理的方法
2019/08/01 Python
Django admin组件的使用
2020/10/24 Python
Python监听键盘和鼠标事件的示例代码
2020/11/18 Python
Python基于opencv的简单图像轮廓形状识别(全网最简单最少代码)
2021/01/28 Python
html5实现canvas阴影效果示例
2014/05/07 HTML / CSS
HTML5头部标签的一些常用信息小结
2016/10/23 HTML / CSS
德国最大的拼图在线商店:Puzzle.de
2016/12/17 全球购物
String这个类型的class为何定义成final?
2012/11/13 面试题
值类型与引用类型有什么不同?请举例说明?并分别列举几种相应的数据类型
2015/10/24 面试题
一名毕业生的自我鉴定
2013/12/04 职场文书
中学教师暑期培训方案
2014/08/27 职场文书
2014年控辍保学工作总结
2014/12/08 职场文书
篮球赛闭幕式主持词
2015/07/03 职场文书
幼儿园开学温馨提示
2015/07/15 职场文书
python实战之用emoji表情生成文字
2021/05/08 Python
python基础之类方法和静态方法
2021/10/24 Python
Nginx stream 配置代理(Nginx TCP/UDP 负载均衡)
2021/11/17 Servers