微信小程序如何實現(xiàn)單個卡片左滑顯示按鈕并防止上下滑動干擾功能

小編給大家分享一下微信小程序如何實現(xiàn)單個卡片左滑顯示按鈕并防止上下滑動干擾功能，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

實現(xiàn)類似ios端微信的左滑顯示置頂、刪除按鈕的功能，首先需將按鈕部分設(shè)為絕對定位，并且right設(shè)為負(fù)值溢出屏幕。利用小程序事件處理的api，分別讀取觸摸開始，觸摸移動時，觸摸結(jié)束的X/Y坐標(biāo)，根據(jù)差值來改變整個卡片的位置。

這里有一個細(xì)節(jié)，為了防止按鈕的點(diǎn)擊干擾到卡片主部分的滑動，需要將整個卡片分為兩部分。

<View style={`${positionStyle[index]}`}>
  <View 
    onTouchStart={this.moveTaskStart}
    onTouchMove={this.moveTask}
    onTouchEnd={this.moveTaskEnd}
  >
    這是主要的卡片部分
  </View>

  <View >這是滑動后出現(xiàn)的按鈕部分</View>
</View>

這里使用的是Taro框架，方法與原生事件api一樣，在開始滑動時分別存入X,Y坐標(biāo)，在手指移動過程中計算移動的距離，當(dāng)X的移動距離大于整個按鈕部分的一班，展開按鈕。

核心功能的實現(xiàn)，只需要分析X坐標(biāo)即可，但因為用戶可能在上下滑動過程中x坐標(biāo)也會偏移造成按鈕的展開，所以需要在move與end兩部分都計算垂直坐標(biāo)的改變與水平坐標(biāo)改變形成的角度，當(dāng)角度過大，視為上下滑動，按鈕不展開。
完整代碼如下：

moveTaskStart(e) {
  if (e.touches.length == 1) {
    //觸摸屏上只有一個觸摸點(diǎn)
    this.setState({
      // 開始觸摸屏幕的X坐標(biāo)
      startX: e.touches[0].clientX,
      startY: e.touches[0].clientY
    });
  }
}

moveTask(e) {
  if (e.touches.length == 1) {
    let moveX = e.touches[0].clientX;
    let moveY = e.touches[0].clientY;
    // 移動距離
    let disX = this.state.startX - moveX;
    let disY = this.state.startY - moveY;
    let angle = disY > 0 ? disY / disX : -disY / disX;
    let btnWidth = this.state.btnWidth;
    let txtStyle = "";
    if (disX == 0 || disX < 30) {
      //右滑動
      txtStyle = "left:0px";
    } else if(angle > 0.5) {
      return;
    } else if (disX > 30 && angle < 0.5) {
      txtStyle = `left: -${disX}px`;
      if (disX >= btnWidth) {
        //距離最大值
        txtStyle = `left: -${btnWidth}px`;
      }
    }
    let index = e.currentTarget.dataset.index;
    let list = this.state.positionStyle;
    this.setState({
      positionStyle: list
    });
  }
}

moveTaskEnd(e) {
  let txtStyle;
  if (e.changedTouches.length == 1) {
    let endX = e.changedTouches[0].clientX;
    let moveY = e.changedTouches[0].clientY;
    //移動距離
    let disX = this.state.startX - endX;
    let disY = this.state.startY - moveY;
    //移動角度
    let angle = disY > 0 ? disY / disX : -disY / disX;
    let btnWidth = this.state.btnWidth;
    //如果距離大于按鈕寬度的一半，并且移動角度較小，顯示按鈕
    if(disX > (btnWidth / 2) && angle < 0.5) {
      txtStyle = `left:-${btnWidth}px`
    }else {
      txtStyle = "left:0px"
    }
    let index = e.currentTarget.dataset.index;
    let list = this.state.positionStyle;
    list[index] = txtStyle;
    this.setState({
      positionStyle: list
    });
  }
}

以上是“微信小程序如何實現(xiàn)單個卡片左滑顯示按鈕并防止上下滑動干擾功能”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！