微信小程序基于movable-view實(shí)現(xiàn)滑動(dòng)刪除效果
基于movable-view實(shí)現(xiàn)的一種較為完美的滑動(dòng)刪除效果
前言:用了很多去實(shí)現(xiàn)滑動(dòng)刪除的效果,都不太盡如人意,最后用小程序官方專(zhuān)用滑動(dòng)組件來(lái)實(shí)現(xiàn),但是這個(gè)組件有一點(diǎn)坑,咱們慢慢道來(lái)
1、wxml布局
<view class="list"> <view class="row" wx:for="{{list}}" wx:key="id"> <movable-area class="list_item"> <!-- 坑就在這里,當(dāng)你向右滑動(dòng)一點(diǎn)點(diǎn)距離的時(shí)候它就停住了,不回去???--> <movable-view class="itmem_wrap" direction="horizontal" inertia="{{true}}" out-of-bounds="{{true}}" x="{{item.x}}" damping="{{60}}" data-index="{{index}}" bind:touchstart="touchMoveStartHandle" bind:touchend="touchMoveEndHandle"> {{'滑動(dòng)刪除' + item.id}} </movable-view> <view class="delete_wrap"> <view class="delete_btn">刪除</view> </view> </movable-area> </view> </view>
2、wxss(這里我用的less布局,布局很重要)
page { background-color: #efefef; } .list { padding: 30rpx 30rpx 0; .row { width: 100%; overflow: hidden; margin-bottom: 30rpx; .list_item { border-radius: 12rpx; position: relative; left: -120rpx; width: calc(100% + 120rpx); height: 160rpx; .itmem_wrap { width: calc(100% - 120rpx); height: 100%; display: flex; align-items: center; justify-content: center; position: relative; left: 120rpx; z-index: 2; background-color: #fff; } .delete_wrap { position: absolute; right: 0; top: 0; width: 50%; height: 100%; background-color: rgb(219, 54, 54); display: flex; justify-content: flex-end; z-index: 1; .delete_btn { width: 120rpx; height: 100%; display: flex; justify-content: center; align-items: center; color: #fff; } } } } }
3、JavaScript
const app = getApp() Page({ data: { list: [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }, { id: 6 }, { id: 7 }, { id: 8 }, { id: 9 }, { id: 10 } ], startX: '', startY: '' }, onLoad: function () { this.setListX(); }, // 給每一項(xiàng)設(shè)置x值 setListX() { this.data.list.map(item => { item.x = 0; }) this.setData({ list: this.data.list }) }, // 開(kāi)始滑動(dòng) touchMoveStartHandle(e) { // 我們要記錄滑動(dòng)開(kāi)始的坐標(biāo)點(diǎn),后面計(jì)算要用到 if (e.touches.length == 1) { this.setData({ startX: e.touches[0].clientX, startY: e.touches[0].clientY }); } }, // 滑動(dòng)事件處理,一次只能滑出一個(gè)刪除按鈕 為了防止滑動(dòng)出現(xiàn)抖動(dòng),我們用滑動(dòng)結(jié)束事件 touchMoveEndHandle: function (e) { var currentIndex = e.currentTarget.dataset.index, //當(dāng)前索引 startX = this.data.startX, //開(kāi)始X坐標(biāo) startY = this.data.startY, //開(kāi)始Y坐標(biāo) touchMoveEndX = e.changedTouches[0].clientX, //滑動(dòng)變化X坐標(biāo) touchMoveEndY = e.changedTouches[0].clientY, //滑動(dòng)變化Y坐標(biāo) //獲取滑動(dòng)角度 angle = this.angle({ X: startX, Y: startY }, { X: touchMoveEndX, Y: touchMoveEndY }); //滑動(dòng)超過(guò)50度角 return,防止上下滑動(dòng)觸發(fā) if (Math.abs(angle) > 50) return; this.data.list.map((item, index) => { if (touchMoveEndX > startX) { // 右滑 if (index == currentIndex) item.x = 0; } else { // 左滑 item.x = -120 if (index != currentIndex) item.x = 0; } }) this.setData({ list: this.data.list }) }, /** * 計(jì)算滑動(dòng)角度 * start 起點(diǎn)坐標(biāo) * end 終點(diǎn)坐標(biāo) * Math.PI 表示一個(gè)圓的周長(zhǎng)與直徑的比例,約為 3.14159;PI就是圓周率π,PI是弧度制的π,也就是180° */ angle: function (start, end) { var _X = end.X - start.X, _Y = end.Y - start.Y return 360 * Math.atan(_Y / _X) / (2 * Math.PI); } })
4、最終效果預(yù)覽
總結(jié)
以上所述是小編給大家介紹的微信小程序基于movable-view實(shí)現(xiàn)滑動(dòng)刪除效果,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
如果你覺(jué)得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!
相關(guān)文章
JavaScript.The.Good.Parts閱讀筆記(一)假值與===運(yùn)算符
JavaScript 假值與===運(yùn)算符,學(xué)習(xí)js的朋友可以看下。2010-11-11解決遠(yuǎn)程頁(yè)面抓取中的亂碼問(wèn)題?
解決遠(yuǎn)程頁(yè)面抓取中的亂碼問(wèn)題?...2007-03-03JS對(duì)象數(shù)組去重的3種方法示例及對(duì)比
這篇文章主要給大家介紹了關(guān)于JS對(duì)象數(shù)組去重的3種方法,三種方法分別包括使用filter和Map、使用reduce以及for循環(huán),文中每個(gè)方法都給出了示例代碼,需要的朋友可以參考下2021-07-07全面解析JavaScript中offsetLeft、offsetTop的用法
本文主要介紹了全面解析JavaScript中offsetLeft、offsetTop的用法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04JavaScript數(shù)學(xué)對(duì)象(Math)方法舉例詳解
這篇文章主要給大家介紹了關(guān)于JavaScript數(shù)學(xué)對(duì)象(Math)方法的相關(guān)資料,Math(數(shù)學(xué))對(duì)象的作用是執(zhí)行普通的算數(shù)任務(wù),文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-03-03javascript 實(shí)現(xiàn)子父窗體互相傳值的簡(jiǎn)單實(shí)例
本篇文章主要是對(duì)javascript 實(shí)現(xiàn)子父窗體互相傳值的簡(jiǎn)單實(shí)例進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-02-02