微信小程序?qū)崿F(xiàn)單個(gè)卡片左滑顯示按鈕并防止上下滑動(dòng)干擾功能

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

這篇文章主要介紹了微信小程序?qū)崿F(xiàn)單個(gè)卡片左滑顯示按鈕并防止上下滑動(dòng)干擾功能，利用小程序事件處理的api，分別讀取觸摸開始，觸摸移動(dòng)時(shí)，觸摸結(jié)束的X/Y坐標(biāo)，根據(jù)差值來(lái)改變整個(gè)卡片的位置，具體實(shí)例代碼跟隨小編一起看看吧

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

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

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

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

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

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

moveTaskStart(e) {
  if (e.touches.length == 1) {
    //觸摸屏上只有一個(gè)觸摸點(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;
    // 移動(dòng)距離
    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) {
      //右滑動(dòng)
      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;
    //移動(dòng)距離
    let disX = this.state.startX - endX;
    let disY = this.state.startY - moveY;
    //移動(dòng)角度
    let angle = disY > 0 ? disY / disX : -disY / disX;
    let btnWidth = this.state.btnWidth;
    //如果距離大于按鈕寬度的一半，并且移動(dòng)角度較小，顯示按鈕
    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
    });
  }
}

總結(jié)

以上所述是小編給大家介紹的微信小程序?qū)崿F(xiàn)單個(gè)卡片左滑顯示按鈕并防止上下滑動(dòng)干擾功能，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

您可能感興趣的文章: