当前位置： 移动技术网 > IT编程>脚本编程>vue.js > vue 左滑删除功能的示例代码

vue 左滑删除功能的示例代码

2019年03月17日  | 移动技术网IT编程  | 我要评论

360怎么看电脑配置,柯暮卿,房贷计算器最新

最近有个需求是要添加一个左滑删除的功能。参考了一下别的老哥的代码,做了一点点改进。记录一下。以备不时之需,话不多说 ，上代码

<template>
 <div class="slider-item">
 <div
  class="content"
  @touchstart='touchstart'
  @touchmove='touchmove'
  @touchend='touchend'
  :style="deleteslider"
 >
  <div class="remove">删除</div>
 </div>
 </div>
</template>
<script>
// 获取删除按钮的宽度，此宽度为滑块左滑的最大距离
const delbtnwidth = 60;
export default {
 data() {
 return {
  startx: 0, // 开始pos
  endx: 0, // 结束pos
  movex: 0, // 滑动时的pos
  disx: 0, // 滑动距离
  deleteslider: 'transform:translatex(0px)',
 };
 },
 methods: {
 touchstart(timestamp, ev) {
  ev = ev || event;
  this.currslidertimestamp = timestamp;
  this.startx = 0;
  // tounches类数组，等于1时表示此时有只有一只手指在触摸屏幕
  if (ev.touches.length === 1) {
  // 记录开始位置
  this.startx = ev.touches[0].clientx;
  console.log(this.startx, this.disx);
  }
 },
 touchmove(timestamp, ev) {
  ev = ev || event;
  if (ev.touches.length === 1) {
  // 滑动时距离浏览器左侧实时距离
  this.movex = ev.touches[0].clientx;
  //实时滑动距离，和上一次滑动做个衔接。防止第二次触发的时候，位置不对的问题
  this.disx = this.startx - this.movex + this.disx;
  // 如果是向右滑动或者不滑动，不改变滑块的位置
  if (this.disx > 0) {
   if (this.disx < 100) {
   this.deleteslider = 'transform:translatex(-' + this.disx + 'px)';
   } else {
   this.deleteslider = 'transform:translatex(-100px)';
   }
  } else {
   if (this.disx < -60) {
   this.deleteslider = 'transform:translatex(60px)';
   } else {
   this.deleteslider = 'transform:translatex(' + math.abs(this.disx) + 'px)';
   }
  }
  }
 },
 touchend() {
  //滑动完成后，滑块应该在的位置
  if (this.disx < 100) {
  this.deleteslider = 'transform:translatex(0px)';
  this.disx = 0;
  } else {
  this.deleteslider = 'transform:translatex(-' + delbtnwidth + 'px)';
  this.disx = 60;
  }
 },
 },
};
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
.slider-item {
 width: 100%;
 height: 60px;
 border-bottom: 1px solid #eeeeee;
 overflow: hidden;
 display: flex;
 position: relative;

 .content {
 min-width: 100%;
 height: 100%;
 background: yellow;
 box-sizing: normal-box;
 padding-right: 60px;
 position: relative;
 transition-property: all;
 transition-duration: 0.4s;
 transition-timing-function: cubic-bezier(0, 0.85, 0.72, 0.86);
 transition-delay: 0s;

 .remove {
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  height: 60px;
  background: #fe5ba8;
  text-align: center;
  line-height: 60px;
  font-size: 15px;
  color: #ffffff;
 }
 }
}
</style>


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网