最近做了一個類似系統(tǒng)操作的左滑刪除的demo，用的taro框架，和大家分享一下~
成都創(chuàng)新互聯(lián)公司長期為上千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為高州企業(yè)提供專業(yè)的做網(wǎng)站、成都網(wǎng)站建設(shè)，高州網(wǎng)站改版等技術(shù)服務(wù)。擁有10多年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。
首先需要考慮的有以下幾點：
1）布局；
2）判斷是左滑還是右滑，左滑時出現(xiàn)刪除，右滑時回歸原位；
3）排他性，意思是某一個時間只能有一個項出現(xiàn)刪除，當(dāng)有另一個出現(xiàn)刪除時，上一個自動回歸原位。
我將列表項封裝成一個組件，而整個列表是另一個組件。
接下來先說列表項這個組件，逐一解決以上這些問題：
1）布局
我采用的是列表項最外層套一個盒子，這個盒子寬度設(shè)置為100vw，并且overflow:hidden。而列表項要包括內(nèi)容和刪除按鈕，內(nèi)容寬度為屏幕寬度，而刪除按鈕定位到右邊，所以整個列表項寬度是超過100vw的。描述可能沒有那么清晰，直接上代碼：
.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; } } {item.title} del
好了，布局結(jié)束之后，接下來是第二個問題：
2）判斷是左滑還是右滑，左滑時出現(xiàn)刪除，右滑時回歸原位
可以看到上面的代碼，我已經(jīng)在列表項左邊部分加了touch的一系列事件，下面就來分析下這幾個事件
上代碼了~
重慶分公司
重慶分公司
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
}
// 滑動超過一定距離時，才觸發(fā)
if (Math.abs(this.moveX) < 10 ) {
return
}
else {
// 否則沒有動畫效果
this.setState({
hasTransition: true
})
}
// 通知父組件當(dāng)前滑動的為第幾項
this.props.onSetCurIndex(index)
}
handleTouchEnd = e => {
// 結(jié)束時，置為true，否則render時不生效
this.setState({
hasTransition: true
})
}
3）排他性
這個主要是通過觸發(fā)父組件的一個事件，在父組件中設(shè)置一個當(dāng)前滑動項的index值，然后再通過props值傳入子組件，渲染的時候加一個判斷實現(xiàn)。
// 左滑時，出現(xiàn)del，右滑時，恢復(fù)原位，距離為操作按鈕大小
// 也可以將滑動距離作為移動距離，但是效果不太好
const distance = this.moveX >= 0 ? 0 : -32
let moveStyle = {}
// 排他性，若某一個處于滑動狀態(tài)時，其他都回歸原位
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'
}
列表項就到此結(jié)束了，下面來說列表組件中調(diào)用列表項~
handleCurIndex = index => {
// 設(shè)置當(dāng)前滑動項，做排他性
this.setState({
currentIndex: index
})
}
好了，大致就是這些了，可能有點混亂，大家可以移步demo源碼~
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
