react移動(dòng)端實(shí)現(xiàn)列表左滑刪除的示例代碼

最近做了一個(gè)類似系統(tǒng)操作的左滑刪除的demo，用的taro框架，和大家分享一下~

成都創(chuàng)新互聯(lián)公司長期為上千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺(tái)，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為高州企業(yè)提供專業(yè)的做網(wǎng)站、成都網(wǎng)站建設(shè)，高州網(wǎng)站改版等技術(shù)服務(wù)。擁有10多年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

首先需要考慮的有以下幾點(diǎn)：

1）布局；
2）判斷是左滑還是右滑，左滑時(shí)出現(xiàn)刪除，右滑時(shí)回歸原位；
3）排他性，意思是某一個(gè)時(shí)間只能有一個(gè)項(xiàng)出現(xiàn)刪除，當(dāng)有另一個(gè)出現(xiàn)刪除時(shí)，上一個(gè)自動(dòng)回歸原位。

我將列表項(xiàng)封裝成一個(gè)組件，而整個(gè)列表是另一個(gè)組件。

接下來先說列表項(xiàng)這個(gè)組件，逐一解決以上這些問題：

1）布局

我采用的是列表項(xiàng)最外層套一個(gè)盒子，這個(gè)盒子寬度設(shè)置為100vw，并且overflow:hidden。而列表項(xiàng)要包括內(nèi)容和刪除按鈕，內(nèi)容寬度為屏幕寬度，而刪除按鈕定位到右邊，所以整個(gè)列表項(xiàng)寬度是超過100vw的。描述可能沒有那么清晰，直接上代碼：

<View className='swipe-item'>
  <View className='swipe-item-wrap' style={moveStyle}>
   <View
    className='swipe-item-left'
    onTouchStart={this.handleTouchStart}
    onTouchMove={this.handleTouchMove.bind(this, index)}
    onTouchEnd={this.handleTouchEnd}
   >
    <View>{item.title}</View>
   </View>
   <View className='swipe-item-right'>
    <View className='swipe-item-del'>del</View>
   </View>
  </View>
</View>

.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;
 }
}

好了，布局結(jié)束之后，接下來是第二個(gè)問題：

2）判斷是左滑還是右滑，左滑時(shí)出現(xiàn)刪除，右滑時(shí)回歸原位

可以看到上面的代碼，我已經(jīng)在列表項(xiàng)左邊部分加了touch的一系列事件，下面就來分析下這幾個(gè)事件

touchstart：開始時(shí)，要獲取當(dāng)前位置
touchmove：滑動(dòng)時(shí)，獲取滑動(dòng)時(shí)的位置，同時(shí)縱向滑動(dòng)時(shí)阻止。來判斷當(dāng)前是左滑還是右滑，左滑時(shí)e.touches[0].pageX在減小，而右滑時(shí)變大。為了防止一個(gè)手誤操作，我加了一個(gè)判斷，當(dāng)滑動(dòng)超過一定距離時(shí)才動(dòng)。并且記錄下當(dāng)前滑動(dòng)的是第幾項(xiàng)。在render的時(shí)候給列表項(xiàng)加一個(gè)樣式就可以實(shí)現(xiàn)了，就是第一段代碼中的style。
touchend：滑動(dòng)結(jié)束

上代碼了~

 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
  // 縱向移動(dòng)時(shí)return
  if (Math.abs(this.moveY) > Math.abs(this.moveX)) {
   return
  }
  // 滑動(dòng)超過一定距離時(shí)，才觸發(fā)
  if (Math.abs(this.moveX) < 10 ) {
   return
  }
  else {
   // 否則沒有動(dòng)畫效果
   this.setState({
    hasTransition: true
   })
  }
  // 通知父組件當(dāng)前滑動(dòng)的為第幾項(xiàng)
  this.props.onSetCurIndex(index)
 }

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

3）排他性

這個(gè)主要是通過觸發(fā)父組件的一個(gè)事件，在父組件中設(shè)置一個(gè)當(dāng)前滑動(dòng)項(xiàng)的index值，然后再通過props值傳入子組件，渲染的時(shí)候加一個(gè)判斷實(shí)現(xiàn)。

// 左滑時(shí)，出現(xiàn)del，右滑時(shí)，恢復(fù)原位，距離為操作按鈕大小
// 也可以將滑動(dòng)距離作為移動(dòng)距離，但是效果不太好
const distance = this.moveX >= 0 ? 0 : -32
let moveStyle = {}
// 排他性，若某一個(gè)處于滑動(dòng)狀態(tài)時(shí)，其他都回歸原位
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'
}

列表項(xiàng)就到此結(jié)束了，下面來說列表組件中調(diào)用列表項(xiàng)~

handleCurIndex = index => {
  // 設(shè)置當(dāng)前滑動(dòng)項(xiàng)，做排他性
  this.setState({
   currentIndex: index
  })
}

<SwipeItem
 item={item}
 key={item.id}
 index={index}
 currentIndex={currentIndex}
 onSetCurIndex={this.handleCurIndex}
/>

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

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

網(wǎng)站題目：react移動(dòng)端實(shí)現(xiàn)列表左滑刪除的示例代碼
文章URL：http://jinyejixie.com/article6/jdooog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、自適應(yīng)網(wǎng)站、移動(dòng)網(wǎng)站建設(shè)、面包屑導(dǎo)航、網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

react移動(dòng)端實(shí)現(xiàn)列表左滑刪除的示例代碼