實現效果：
}元/m²view
>
class
="hui place"
>
}view
>
class
="tag"
>
class
="lpspan red"
>
}text
>
class
="lpspan tagico"
wx:for
="}"
wx:for-item
="t"
wx:key
="key"
>
}text
>
view
>
view
>
view
>
class
="del"
catchtap
="del"
data-bid
="}"
>
刪除view
>
view
>
view
>
view
>
js:
import
from
"../../utils/requst/api.js"
;page(,
/** * 生命週期函式--監聽頁面載入
*/onload:
function
(options)
)this
.getcollectiondata()
;}, lpinfo:
function
(e))},
getcollectiondata:
function()
getcollection
(params)
.then
((res)
=>)}
)},//刪除事件
del:
function
(e)// console.log(paramsdel);
wx.showmodal()
}})}
else
if(res.cancel))}
}})}
,//手指觸控動作開始 記錄起點x座標
touchstart:
function
(e))},
//滑動事件處理
touchmove:
function
(e),);
this
.setdata()
// console.log(e);
this
.data.tuijlplist.
map(
(v, i)
=>)}
else)}
}})}
,/**
* 計算滑動角度
* @param start 起點座標
* @param end 終點座標
*/angle:
function
(start, end),}
)
@red
: #ff2b0a;
@blue
: #1fa2ff;
.container
.tuijianlp
}.rig
.hui
.price
.place
.tag
.red
.tagico}}
}.lpli:nth-last-child(1)
}.content
.del
.touch-move-active .content,
.touch-move-active .del
微信小程式 左滑刪除效果
1 wxml touch item元素繫結了bindtouchstart bindtouchmove事件 class container class touch item data index bindtouchstart touchstart bindtouchmove touchmove wx ...
微信小程式左滑效果
container touch item data index bindtouchstart touchstart bindtouchmove touchmove wx for wx key content del catchtap del data index 刪除 複製 touch item c...
微信小程式左滑刪除
view class touch item data index wx for wx key view class content view style class item data index bindtouchstart touchstart bindtouchmove touchmove b...