小編給大家分享一下微信小程序如何實(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è)資訊頻道!