成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

前端實(shí)現(xiàn)列表左滑刪除（react）

sewerganger / 642人閱讀

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

最近做了一個(gè)類似系統(tǒng)操作的左滑刪除的demo，用的taro框架，和大家分享一下~
首先需要考慮的有以下幾點(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的。描述可能沒有那么清晰，直接上代碼：


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

好了，布局結(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
    })
}

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/105288.html

相關(guān)文章

  • 前端實(shí)現(xiàn)列表左滑刪除（react）

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

    everfight 評(píng)論0 收藏0

  • 小程序開發(fā)：左滑刪除

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

    missonce 評(píng)論0 收藏0

  • H5仿手Q左滑刪除功能組件

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

    laznrbfe 評(píng)論0 收藏0

  • H5仿手Q左滑刪除功能組件

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

    mayaohua 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<