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

創(chuàng)新互聯(lián)建站2013年至今，公司以做網(wǎng)站、網(wǎng)站建設(shè)、系統(tǒng)開發(fā)、網(wǎng)絡(luò)推廣、文化傳媒、企業(yè)宣傳、平面廣告設(shè)計(jì)等為主要業(yè)務(wù)，適用行業(yè)近百種。服務(wù)企業(yè)客戶上千多家，涉及國內(nèi)多個(gè)省份客戶。擁有多年網(wǎng)站建設(shè)開發(fā)經(jīng)驗(yàn)。為企業(yè)提供專業(yè)的網(wǎng)站建設(shè)、創(chuàng)意設(shè)計(jì)、宣傳推廣等服務(wù)。 通過專業(yè)的設(shè)計(jì)、獨(dú)特的風(fēng)格，為不同客戶提供各種風(fēng)格的特色服務(wù)。

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

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

  
    這是主要的卡片部分
  

  這是滑動(dòng)后出現(xiàn)的按鈕部分

這里使用的是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
    });
  }
}

以上是“微信小程序如何實(shí)現(xiàn)單個(gè)卡片左滑顯示按鈕并防止上下滑動(dòng)干擾功能”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

當(dāng)前題目：微信小程序如何實(shí)現(xiàn)單個(gè)卡片左滑顯示按鈕并防止上下滑動(dòng)干擾功能-創(chuàng)新互聯(lián)
瀏覽路徑：http://weahome.cn/article/dpcjgj.html