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

更新時間：2019年12月06日 14:10:48 作者：wantingtr

這篇文章主要介紹了微信小程序實現(xiàn)單個卡片左滑顯示按鈕并防止上下滑動干擾功能，利用小程序事件處理的api，分別讀取觸摸開始，觸摸移動時，觸摸結束的X/Y坐標，根據差值來改變整個卡片的位置，具體實例代碼跟隨小編一起看看吧

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

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

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

  <View style="right: -260px;">這是滑動后出現(xiàn)的按鈕部分</View>
</View>

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

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

moveTaskStart(e) {
  if (e.touches.length == 1) {
    //觸摸屏上只有一個觸摸點
    this.setState({
      // 開始觸摸屏幕的X坐標
      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)單個卡片左滑顯示按鈕并防止上下滑動干擾功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！

您可能感興趣的文章: