前端實現列表左滑刪除（react）

sewerganger 發布于2019-08-23 18:28 / 627人閱讀

摘要：而列表項要包括內容和刪除按鈕，內容寬度為屏幕寬度，而刪除按鈕定位到右邊，所以整個列表項寬度是超過的。來判斷當前是左滑還是右滑，左滑時在減小，而右滑時變大。并且記錄下當前滑動的是第幾項。

最近做了一個類似系統操作的左滑刪除的demo，用的taro框架，和大家分享一下~
首先需要考慮的有以下幾點：
1）布局；
2）判斷是左滑還是右滑，左滑時出現刪除，右滑時回歸原位；
3）排他性，意思是某一個時間只能有一個項出現刪除，當有另一個出現刪除時，上一個自動回歸原位。
我將列表項封裝成一個組件，而整個列表是另一個組件。
接下來先說列表項這個組件，逐一解決以上這些問題：
1）布局
我采用的是列表項最外層套一個盒子，這個盒子寬度設置為100vw，并且overflow:hidden。而列表項要包括內容和刪除按鈕，內容寬度為屏幕寬度，而刪除按鈕定位到右邊，所以整個列表項寬度是超過100vw的。描述可能沒有那么清晰，直接上代碼：


    
      
        {item.title}
      
      
        del
      
    


.swipe-item {
  width: 100vw;
  overflow: hidden;
  line-height: 24PX;
  height: 24PX;
  text-align: center;
  margin-bottom: 10PX;

  &-wrap {
    width: calc(100vw + 32PX);
    height: 100%;
    position: relative;
  }

  &-left {
    width: 100vw;
  }

  &-right {
    width: 32PX;
    height: 100%;
    background: pink;
    position: absolute;
    right: 0;
    top: 0;
  }
}

好了，布局結束之后，接下來是第二個問題：
2）判斷是左滑還是右滑，左滑時出現刪除，右滑時回歸原位
可以看到上面的代碼，我已經在列表項左邊部分加了touch的一系列事件，下面就來分析下這幾個事件

touchstart：開始時，要獲取當前位置

touchmove：滑動時，獲取滑動時的位置，同時縱向滑動時阻止。來判斷當前是左滑還是右滑，左滑時e.touches[0].pageX在減小，而右滑時變大。為了防止一個手誤操作，我加了一個判斷，當滑動超過一定距離時才動。并且記錄下當前滑動的是第幾項。在render的時候給列表項加一個樣式就可以實現了，就是第一段代碼中的style。

touchend：滑動結束

上代碼了~

  handleTouchStart = e => {  
    this.startX = e.touches[0].pageX
    this.startY = e.touches[0].pageY
  }

  handleTouchMove (index, e) {
    // 若想阻止冒泡且最外層盒子為scrollView，不可用e.stopPropogagation()，否則頁面卡死
    this.currentX = e.touches[0].pageX
    this.moveX = this.currentX - this.startX
    this.moveY = e.touches[0].pageY - this.startY
    // 縱向移動時return
    if (Math.abs(this.moveY) > Math.abs(this.moveX)) {
      return
    }
    // 滑動超過一定距離時，才觸發
    if (Math.abs(this.moveX) < 10 ) {
      return
    }
    else {
      // 否則沒有動畫效果
      this.setState({
        hasTransition: true
      })
    }
    // 通知父組件當前滑動的為第幾項
    this.props.onSetCurIndex(index)
  }

  handleTouchEnd = e => {
    // 結束時，置為true，否則render時不生效
    this.setState({
      hasTransition: true
    })
 }

3）排他性
這個主要是通過觸發父組件的一個事件，在父組件中設置一個當前滑動項的index值，然后再通過props值傳入子組件，渲染的時候加一個判斷實現。

// 左滑時，出現del，右滑時，恢復原位，距離為操作按鈕大小
// 也可以將滑動距離作為移動距離，但是效果不太好
const distance = this.moveX >= 0 ? 0 : -32
let moveStyle = {}
// 排他性，若某一個處于滑動狀態時，其他都回歸原位
if (hasTransition && currentIndex === index) {
  moveStyle.transform = `translateX(${distance}PX)`
  moveStyle.webkitTransform = `translateX(${distance}PX)`
  moveStyle.transition = "transform 0.3s ease"
  moveStyle.WebkitTransition = "transform 0.3s ease"
}

列表項就到此結束了，下面來說列表組件中調用列表項~

handleCurIndex = index => {
    // 設置當前滑動項，做排他性
    this.setState({
      currentIndex: index
    })
}

好了，大致就是這些了，可能有點混亂，大家可以移步demo源碼~

云服務器 GPU云服務器左滑刪除前端react 前端框架react react實現輪播圖

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/105288.html

前端實現列表左滑刪除（react）

摘要：而列表項要包括內容和刪除按鈕，內容寬度為屏幕寬度，而刪除按鈕定位到右邊，所以整個列表項寬度是超過的。來判斷當前是左滑還是右滑，左滑時在減小，而右滑時變大。并且記錄下當前滑動的是第幾項。最近做了一個類似系統操作的左滑刪除的demo，用的taro框架，和大家分享一下~首先需要考慮的有以下幾點：1）布局；2）判斷是左滑還是右滑，左滑時出現刪除，右滑時回歸原位；3）排他性，意思是某一個時間只...

everfight 2019-08-02 15:27 評論0 收藏0
小程序開發：左滑刪除

摘要：，上層使用絕對定位，我們操縱屬性的值來實現像左移動。，我們通過微信小程序提供的對象和個有關手指觸摸的函數，，來實現隨手指移動。省略數據刪除部分中根據綁定的事件觸發刪除按鈕，用戶點擊刪除，發送請求，根據返回值對用戶進行反饋。導語首先聲明兩點：思路以及代碼，是根據資料進行一些修改以及補充，原文地址在此下面的只是 demo，各位根據自己的需要進行修改完善實現的思路摘抄如下 1...

missonce 2019-07-01 11:14 評論0 收藏0
H5仿手Q左滑刪除功能組件

摘要：背景前不久遇到一個需求，列表頁實現左滑刪除功能。首先對下文有關滑塊的指代標識做出統一規定體驗了一下手原生滑動功能，在此之前對于滑塊的具體動效提出了幾個問題。最終效果組件源碼后話同事反饋沒有給滑動開始或完成時暴露一個自定義事件的接口。。背景前不久遇到一個需求，h5列表頁實現左滑刪除功能。首先對下文有關滑塊的指代標識做出統一規定 showImg(https://segmentfa...

laznrbfe 2019-08-29 11:09 評論0 收藏0
H5仿手Q左滑刪除功能組件

摘要：背景前不久遇到一個需求，列表頁實現左滑刪除功能。首先對下文有關滑塊的指代標識做出統一規定體驗了一下手原生滑動功能，在此之前對于滑塊的具體動效提出了幾個問題。最終效果組件源碼后話同事反饋沒有給滑動開始或完成時暴露一個自定義事件的接口。。背景前不久遇到一個需求，h5列表頁實現左滑刪除功能。首先對下文有關滑塊的指代標識做出統一規定 showImg(https://segmentfa...

mayaohua 2019-08-21 14:19 評論0 收藏0