快捷導航

vue 左滑刪除功能的示例代碼

更新時間：2019年01月28日 08:27:59 作者：菠菜

這篇文章主要介紹了vue 左滑刪除功能的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

最近有個需求是要添加一個左滑刪除的功能。參考了一下別的老哥的代碼,做了一點點改進。記錄一下。以備不時之需,話不多說，上代碼

<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, // 結(jié)束pos
  moveX: 0, // 滑動時的pos
  disX: 0, // 滑動距離
  deleteSlider: 'transform:translateX(0px)',
 };
 },
 methods: {
 touchStart(timestamp, ev) {
  ev = ev || event;
  this.currSliderTimestamp = timestamp;
  this.startX = 0;
  // tounches類數(shù)組，等于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) {
  // 滑動時距離瀏覽器左側(cè)實時距離
  this.moveX = ev.touches[0].clientX;
  //實時滑動距離，和上一次滑動做個銜接。防止第二次觸發(fā)的時候，位置不對的問題
  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() {
  //滑動完成后，滑塊應(yīng)該在的位置
  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>

參考實例

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: