您好,登錄后才能下訂單哦!
如何在微信小程序中實(shí)現(xiàn)一個左滑刪除功能?針對這個問題,這篇文章詳細(xì)介紹了相對應(yīng)的分析和解答,希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。
<view class="touch-item {{item.isTouchMove ? 'touch-move-active' : ''}}" data-index="{{index}}" wx:for="{{list}}" wx:key> <view class="content"> <view class='item' data-index='{{index}}' bindtouchstart="touchstart" bindtouchmove="touchmove" bindtouchend="touchE"> <view class='title'>{{item.title}}</view> <text>{{item.create_time}}</text> </view> </view> <view class="del" data-id="{{item.id}}" catchtap="delBtn" data-index="{{index}}">刪除</view> </view>
.touch-item { display: flex; justify-content: space-between; width: 100%; overflow: hidden; margin-bottom: 10rpx; background: #f5f5f5; height: 216rpx; } .content { width: 100%; margin-right: 0; -webkit-transition: all 0.4s; transition: all 0.4s; -webkit-transform: translateX(90px); transform: translateX(90px); margin-left: -90px; } .del { width: 90px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; -webkit-transform: translateX(90px); transform: translateX(90px); -webkit-transition: all 0.4s; transition: all 0.4s; font-size: 35rpx; } .touch-move-active .content, .touch-move-active .del { -webkit-transform: translateX(0); transform: translateX(0); }
// pages/touch/touch.js Page({ /** * 頁面的初始數(shù)據(jù) */ data: { startX: 0, //開始坐標(biāo) startY: 0, page: 1, list: [{ id: 0, title: '標(biāo)題1', create_time: '2019-09-06' }, { id: 1, title: '標(biāo)題2', create_time: '2019-09-06' }, { id: 2, title: '標(biāo)題3', create_time: '2019-09-06' }, ] }, touchE: function(e) { // console.log(e); var that = this if (e.changedTouches.length == 1) { //手指移動結(jié)束后觸摸點(diǎn)位置的X坐標(biāo) var endX = e.changedTouches[0].clientX; //觸摸開始與結(jié)束,手指移動的距離 var disX = that.data.startX - endX; var delBtnWidth = that.data.delBtnWidth; //如果距離小于刪除按鈕的1/2,不顯示刪除按鈕 var txtStyle = disX > delBtnWidth / 2 ? "left:-" + delBtnWidth + "rpx": "left:0rpx"; //獲取手指觸摸的是哪一項(xiàng) var index = e.currentTarget.dataset.index; var list = that.data.list; list[index].txtStyle = txtStyle; //更新列表的狀態(tài) that.setData({ list: list }); } }, //手指觸摸動作開始 記錄起點(diǎn)X坐標(biāo) touchstart: function(e) { //開始觸摸時 重置所有刪除 this.data.list.forEach(function(v, i) { if (v.isTouchMove) //只操作為true的 v.isTouchMove = false; }) this.setData({ startX: e.changedTouches[0].clientX, startY: e.changedTouches[0].clientY, list: this.data.list }) }, //滑動事件處理 touchmove: function(e) { var that = this, index = e.currentTarget.dataset.index, //當(dāng)前索引 startX = that.data.startX, //開始X坐標(biāo) startY = that.data.startY, //開始Y坐標(biāo) touchMoveX = e.changedTouches[0].clientX, //滑動變化坐標(biāo) touchMoveY = e.changedTouches[0].clientY, //滑動變化坐標(biāo) //獲取滑動角度 angle = that.angle({ X: startX, Y: startY }, { X: touchMoveX, Y: touchMoveY }); that.data.list.forEach(function(v, i) { v.isTouchMove = false //滑動超過30度角 return if (Math.abs(angle) > 30) return; if (i == index) { if (touchMoveX > startX) //右滑 v.isTouchMove = false else //左滑 v.isTouchMove = true } }) //更新數(shù)據(jù) that.setData({ list: that.data.list }) }, /** * 計(jì)算滑動角度 * @param {Object} start 起點(diǎn)坐標(biāo) * @param {Object} end 終點(diǎn)坐標(biāo) */ angle: function(start, end) { var _X = end.X - start.X, _Y = end.Y - start.Y //返回角度 /Math.atan()返回?cái)?shù)字的反正切值 return 360 * Math.atan(_Y / _X) / (2 * Math.PI); }, /** * 生命周期函數(shù)--監(jiān)聽頁面加載 */ onLoad: function(options) { }, /** * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成 */ onReady: function() { }, /** * 生命周期函數(shù)--監(jiān)聽頁面顯示 */ onShow: function() { }, /** * 生命周期函數(shù)--監(jiān)聽頁面隱藏 */ onHide: function() { }, /** * 生命周期函數(shù)--監(jiān)聽頁面卸載 */ onUnload: function() { }, /** * 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作 */ onPullDownRefresh: function() { }, /** * 頁面上拉觸底事件的處理函數(shù) */ onReachBottom: function() { }, /** * 用戶點(diǎn)擊右上角分享 */ onShareAppMessage: function() { } })
關(guān)于如何在微信小程序中實(shí)現(xiàn)一個左滑刪除功能問題的解答就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,如果你還有很多疑惑沒有解開,可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。