微信小程序?qū)崿F(xiàn)單個(gè)卡片左滑顯示按鈕并防止上下滑動(dòng)干擾功能
實(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è)卡片分為兩部分。
<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)干擾功能,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉(zhuǎn)載,煩請注明出處,謝謝!
- 微信小程序?qū)崿F(xiàn)可拖動(dòng)懸浮圖標(biāo)(包括按鈕角標(biāo)的實(shí)現(xiàn))
- 微信小程序?qū)㈨撁姘粹o懸浮固定在底部的實(shí)現(xiàn)代碼
- 微信小程序點(diǎn)擊按鈕動(dòng)態(tài)切換input的disabled禁用/啟用狀態(tài)功能
- 微信小程序中的video視頻實(shí)現(xiàn) 自定義播放按鈕、封面圖、視頻封面上文案
- 微信小程序批量監(jiān)聽輸入框?qū)Π粹o樣式進(jìn)行控制的實(shí)現(xiàn)代碼
- 微信小程序 多行文本顯示...+顯示更多按鈕和收起更多按鈕功能
- 微信小程序按鈕點(diǎn)擊動(dòng)畫效果的實(shí)現(xiàn)
- 操作按鈕懸浮固定在微信小程序底部的實(shí)現(xiàn)代碼
- 詳解微信小程序膠囊按鈕返回|首頁自定義導(dǎo)航欄功能
- 微信小程序mpvue點(diǎn)擊按鈕獲取button值的方法
- 微信小程序單選radio及多選checkbox按鈕用法示例
- 微信小程序開發(fā)之點(diǎn)擊按鈕退出小程序的實(shí)現(xiàn)方法
- 微信小程序按鈕巧妙用法
相關(guān)文章
微信小程序?qū)崿F(xiàn)聯(lián)動(dòng)選擇器
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)聯(lián)動(dòng)選擇器,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-02-02layui-table對返回的數(shù)據(jù)進(jìn)行轉(zhuǎn)變顯示的實(shí)例
今天小編就為大家分享一篇layui-table對返回的數(shù)據(jù)進(jìn)行轉(zhuǎn)變顯示的實(shí)例,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09JS控制FileUpload的上傳文件類型實(shí)例代碼
下面小編就為大家?guī)硪黄狫S控制FileUpload的上傳文件類型實(shí)例代碼。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10JavaScript中innerHTML使用方法實(shí)例
js中常常用到innerHTML,其作用就是獲取到標(biāo)簽里面的內(nèi)容,同時(shí)也可以為標(biāo)簽添加內(nèi)容,下面這篇文章主要給大家介紹了關(guān)于JavaScript中innerHTML使用方法的相關(guān)資料,需要的朋友可以參考下2022-10-10JS實(shí)現(xiàn)圖片的不間斷連續(xù)滾動(dòng)的簡單實(shí)例
下面小編就為大家?guī)硪黄狫S實(shí)現(xiàn)圖片的不間斷連續(xù)滾動(dòng)的簡單實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06微信小程序 數(shù)據(jù)封裝,參數(shù)傳值等經(jīng)驗(yàn)分享
這篇文章主要介紹了微信小程序 數(shù)據(jù)封裝,參數(shù)傳值等經(jīng)驗(yàn)分享的相關(guān)資料,需要的朋友可以參考下2017-01-01根據(jù)IP的地址,區(qū)分不同的地區(qū),查看不同的網(wǎng)站頁面的js代碼
在朋友的幫助下,找到一個(gè)比較方便的方法,就是把以下代碼,加入我們自己需要跳轉(zhuǎn)的頁面里,這樣做還是不錯(cuò)的呢2013-02-02詳解Javascript 中的 class、構(gòu)造函數(shù)、工廠函數(shù)
這篇文章主要介紹了詳解Javascript 中的 class、構(gòu)造函數(shù)、工廠函數(shù),需要的朋友可以參考下2017-12-12