微信小程序?qū)崿F(xiàn)單個卡片左滑顯示按鈕并防止上下滑動干擾功能
實現(xiàn)類似ios端微信的左滑顯示置頂、刪除按鈕的功能,首先需將按鈕部分設為絕對定位,并且right設為負值溢出屏幕。利用小程序事件處理的api,分別讀取觸摸開始,觸摸移動時,觸摸結(jié)束的X/Y坐標,根據(jù)差值來改變整個卡片的位置。
這里有一個細節(jié),為了防止按鈕的點擊干擾到卡片主部分的滑動,需要將整個卡片分為兩部分。
<View style={`${positionStyle[index]}`}> <View onTouchStart={this.moveTaskStart} onTouchMove={this.moveTask} onTouchEnd={this.moveTaskEnd} > 這是主要的卡片部分 </View> <View style="right: -260px;">這是滑動后出現(xiàn)的按鈕部分</View> </View>
這里使用的是Taro框架,方法與原生事件api一樣,在開始滑動時分別存入X,Y坐標,在手指移動過程中計算移動的距離,當X的移動距離大于整個按鈕部分的一班,展開按鈕。
核心功能的實現(xiàn),只需要分析X坐標即可,但因為用戶可能在上下滑動過程中x坐標也會偏移造成按鈕的展開,所以需要在move與end兩部分都計算垂直坐標的改變與水平坐標改變形成的角度,當角度過大,視為上下滑動,按鈕不展開。
完整代碼如下:
moveTaskStart(e) { if (e.touches.length == 1) { //觸摸屏上只有一個觸摸點 this.setState({ // 開始觸摸屏幕的X坐標 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; // 移動距離 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) { //右滑動 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; //移動距離 let disX = this.state.startX - endX; let disY = this.state.startY - moveY; //移動角度 let angle = disY > 0 ? disY / disX : -disY / disX; let btnWidth = this.state.btnWidth; //如果距離大于按鈕寬度的一半,并且移動角度較小,顯示按鈕 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)單個卡片左滑顯示按鈕并防止上下滑動干擾功能,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉(zhuǎn)載,煩請注明出處,謝謝!
- 微信小程序?qū)崿F(xiàn)可拖動懸浮圖標(包括按鈕角標的實現(xiàn))
- 微信小程序?qū)㈨撁姘粹o懸浮固定在底部的實現(xiàn)代碼
- 微信小程序點擊按鈕動態(tài)切換input的disabled禁用/啟用狀態(tài)功能
- 微信小程序中的video視頻實現(xiàn) 自定義播放按鈕、封面圖、視頻封面上文案
- 微信小程序批量監(jiān)聽輸入框?qū)Π粹o樣式進行控制的實現(xiàn)代碼
- 微信小程序 多行文本顯示...+顯示更多按鈕和收起更多按鈕功能
- 微信小程序按鈕點擊動畫效果的實現(xiàn)
- 操作按鈕懸浮固定在微信小程序底部的實現(xiàn)代碼
- 詳解微信小程序膠囊按鈕返回|首頁自定義導航欄功能
- 微信小程序mpvue點擊按鈕獲取button值的方法
- 微信小程序單選radio及多選checkbox按鈕用法示例
- 微信小程序開發(fā)之點擊按鈕退出小程序的實現(xiàn)方法
- 微信小程序按鈕巧妙用法
相關(guān)文章
layui-table對返回的數(shù)據(jù)進行轉(zhuǎn)變顯示的實例
今天小編就為大家分享一篇layui-table對返回的數(shù)據(jù)進行轉(zhuǎn)變顯示的實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09微信小程序 數(shù)據(jù)封裝,參數(shù)傳值等經(jīng)驗分享
這篇文章主要介紹了微信小程序 數(shù)據(jù)封裝,參數(shù)傳值等經(jīng)驗分享的相關(guān)資料,需要的朋友可以參考下2017-01-01根據(jù)IP的地址,區(qū)分不同的地區(qū),查看不同的網(wǎng)站頁面的js代碼
在朋友的幫助下,找到一個比較方便的方法,就是把以下代碼,加入我們自己需要跳轉(zhuǎn)的頁面里,這樣做還是不錯的呢2013-02-02詳解Javascript 中的 class、構(gòu)造函數(shù)、工廠函數(shù)
這篇文章主要介紹了詳解Javascript 中的 class、構(gòu)造函數(shù)、工廠函數(shù),需要的朋友可以參考下2017-12-12