介绍 & lt; view 类=癱ontainer"比;
,& lt; view 类=皌ouch-item {{item.isTouchMove ?, & # 39; touch-move-active& # 39;,:, & # 39; & # 39;}}“,材料指数=皗{指数}}“,bindtouchstart=皌ouchstart", bindtouchmove=皌ouchmove",天气:为=皗{物品}},,天气:关键=?“在
& lt;才能view 类=癱ontent"在{{item.content}} & lt;/view>
& lt;才能view 类=癲el", catchtap=癲el",材料指数=皗{指数}}“祝辞删除& lt;/view>
,& lt;/view>
& lt;/view> .touch-item {
,字体大小:14 px;
,显示:flex;
,justify-content:之间的空间;
,边界底部:1 px solid # ccc;
,宽度:100%;
,溢出:隐藏
}
.content {
,宽度:100%;
,填充:10 px;
,行高:22 px;
,margin-right: 0;
,-webkit-transition: all 0.4年代;
,转型:all 0.4年代;
,-webkit-transform: translateX (90 px);
,变换:translateX (90 px);
,margin-left: -90 px
}
.del {
,背景颜色:橘红色;
,宽度:90 px;
,显示:flex;
,flex-direction:列;
,对齐项目:中心;
,justify-content:中心;
,颜色:# fff;
,-webkit-transform: translateX (90 px);
,变换:translateX (90 px);
,-webkit-transition: all 0.4年代;
,转型:all 0.4年代;
}
.touch-move-active .content,
.touch-move-active .del {
,-webkit-transform: translateX (0);
,变换:translateX (0);
} var app =, getApp ()
页面({
,数据:{
,,项目:[],
,,startX: 0,,//开始坐标
startY才能:0
},
,onLoad: function (), {
for 才能;(var 小姐:=,0;,小姐:& lt;, 10;,我+ +),{
,,this.data.items.push ({
,,,内容:,小姐:+,“,向左滑动删除哦,向左滑动删除哦,向左滑动删除哦,向左滑动删除哦,向左滑动删除哦“,
,,,isTouchMove:, false //默认全隐藏删除
,,})
,,}
this.setData({才能
,,项目:this.data.items
})才能
},
,//手指触摸动作开始,记录起点X坐标
,touchstart: function (e), {//才能开始触摸时,重置所有删除
this.data.items.forEach才能(function (v, i), {
,,if (v.isTouchMove)//只操作为真实的
,,,v.isTouchMove =,假;
})才能
this.setData({才能
,,,startX: e.changedTouches [0] .clientX,
,,,startY: e.changedTouches [0] .clientY,
,,项目:this.data.items
})才能
},
,//滑动事件处理
,touchmove: function (e), {
var 才能;that =,,
,,index =, e.currentTarget.dataset.index,//当前索引
,,startX =, that.data.startX,//开始X坐标
,,startY =, that.data.startY,//开始Y坐标
,,touchMoveX =, e.changedTouches [0] .clientX,//滑动变化坐标
,,touchMoveY =, e.changedTouches [0] .clientY,//滑动变化坐标
,,//获取滑动角度
,,angle =, that.angle ({, X: startX,, Y,, startY },, {, X: touchMoveX,, Y,, touchMoveY });
that.data.items.forEach才能(function (v, i), {
,,v.isTouchMove =false
,,//滑动超过30度角,回报
,,if (Math.abs(角),祝辞,30),返回;
,,if (小姐:==,指数),{
,,,if (touchMoveX 祝辞,startX),//右滑
,,,,v.isTouchMove =false
,,,else //左滑
,,,,v.isTouchMove =,真的
,,}
})才能//才能更新数据
that.setData({才能
,,项目:that.data.items
})才能
},/* *
*,才能计算滑动角度
*,才能@param {对象},start 起点坐标
*,才能@param {对象},最终获得终点坐标
,*/,角度:function (,,), {
var 才能;_X =, end.X 作用;start.X,
null
null
null
null
null
null
null
null
null
null
null
null
这篇文章主要介绍了小程序怎样实现向左滑动删除功能,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。
<强>微信小程序向左滑动删除功能的实现
<强>实现效果图:
实现代码:
<强> 1,wxml touch-item元素绑定了bindtouchstart, bindtouchmove事件
<强> 2,wxs flex布的局,css3动画
<强> 3,js注释很详细
