真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

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

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

公司主營(yíng)業(yè)務(wù):成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站開(kāi)發(fā)等業(yè)務(wù)。幫助企業(yè)客戶(hù)真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳,提高企業(yè)的競(jìng)爭(zhēng)能力。創(chuàng)新互聯(lián)公司是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開(kāi)放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化,感謝他們對(duì)我們的高要求,感謝他們從不同領(lǐng)域給我們帶來(lái)的挑戰(zhàn),讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶(hù)帶來(lái)驚喜。創(chuàng)新互聯(lián)公司推出容城免費(fèi)做網(wǎng)站回饋大家。

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

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


  
    這是主要的卡片部分
  

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

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

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

moveTaskStart(e) {
  if (e.touches.length == 1) {
    //觸摸屏上只有一個(gè)觸摸點(diǎn)
    this.setState({
      // 開(kāi)始觸摸屏幕的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)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!


名稱(chēng)欄目:微信小程序如何實(shí)現(xiàn)單個(gè)卡片左滑顯示按鈕并防止上下滑動(dòng)干擾功能
分享鏈接:http://weahome.cn/article/pohsic.html

其他資訊

在線咨詢(xún)

微信咨詢(xún)

電話(huà)咨詢(xún)

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部