微信小程序基于movable-view實(shí)現(xiàn)滑動刪除效果
基于movable-view實(shí)現(xiàn)的一種較為完美的滑動刪除效果
前言:用了很多去實(shí)現(xiàn)滑動刪除的效果,都不太盡如人意,最后用小程序官方專用滑動組件來實(shí)現(xiàn),但是這個組件有一點(diǎn)坑,咱們慢慢道來
1、wxml布局
<view class="list"> <view class="row" wx:for="{{list}}" wx:key="id"> <movable-area class="list_item"> <!-- 坑就在這里,當(dāng)你向右滑動一點(diǎn)點(diǎn)距離的時候它就停住了,不回去???--> <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"> {{'滑動刪除' + 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 }) }, // 開始滑動 touchMoveStartHandle(e) { // 我們要記錄滑動開始的坐標(biāo)點(diǎn),后面計算要用到 if (e.touches.length == 1) { this.setData({ startX: e.touches[0].clientX, startY: e.touches[0].clientY }); } }, // 滑動事件處理,一次只能滑出一個刪除按鈕 為了防止滑動出現(xiàn)抖動,我們用滑動結(jié)束事件 touchMoveEndHandle: function (e) { var currentIndex = e.currentTarget.dataset.index, //當(dāng)前索引 startX = this.data.startX, //開始X坐標(biāo) startY = this.data.startY, //開始Y坐標(biāo) touchMoveEndX = e.changedTouches[0].clientX, //滑動變化X坐標(biāo) touchMoveEndY = e.changedTouches[0].clientY, //滑動變化Y坐標(biāo) //獲取滑動角度 angle = this.angle({ X: startX, Y: startY }, { X: touchMoveEndX, Y: touchMoveEndY }); //滑動超過50度角 return,防止上下滑動觸發(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 }) }, /** * 計算滑動角度 * start 起點(diǎn)坐標(biāo) * end 終點(diǎn)坐標(biāo) * Math.PI 表示一個圓的周長與直徑的比例,約為 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)滑動刪除效果,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉(zhuǎn)載,煩請注明出處,謝謝!
相關(guān)文章
JavaScript.The.Good.Parts閱讀筆記(一)假值與===運(yùn)算符
JavaScript 假值與===運(yùn)算符,學(xué)習(xí)js的朋友可以看下。2010-11-11全面解析JavaScript中offsetLeft、offsetTop的用法
本文主要介紹了全面解析JavaScript中offsetLeft、offsetTop的用法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04JavaScript數(shù)學(xué)對象(Math)方法舉例詳解
這篇文章主要給大家介紹了關(guān)于JavaScript數(shù)學(xué)對象(Math)方法的相關(guān)資料,Math(數(shù)學(xué))對象的作用是執(zhí)行普通的算數(shù)任務(wù),文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-03-03javascript 實(shí)現(xiàn)子父窗體互相傳值的簡單實(shí)例
本篇文章主要是對javascript 實(shí)現(xiàn)子父窗體互相傳值的簡單實(shí)例進(jìn)行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-02-02