上划取消，松开发送，移动端移动
发布于2021-11-20 18:17 阅读(693) 评论(0) 点赞(15) 收藏(4)
模仿微信语音功能，没有录音效果，上划取消，松开发送的动作
showModel控制模态框显示隐藏
modelIndex控制显示的效果，取消，发送的样式文字提示等
initEvent() {
var btnElem = document.getElementById("messageBtn"); //获取ID
var posStart = 0; //初始化起点坐标
var posEnd = 0; //初始化终点坐标
var posMove = 0; //初始化滑动坐标
let that = this;
btnElem.addEventListener("touchstart", function (event) {
event.preventDefault(); //阻止浏览器默认行为
posStart = 0;
posStart = event.touches[0].pageY; //获取起点坐标
that.showModel = true;
// alert("start");
// alert(posStart + "---------开始坐标");
});
btnElem.addEventListener("touchmove", function (event) {
event.preventDefault(); //阻止浏览器默认行为
posMove = 0;
posMove = event.targetTouches[0].pageY; //获取滑动实时坐标
if (posStart - posMove < 150) {
that.modelIndex = 0;
} else {
that.modelIndex = 1;
}
// alert(posStart + "---------");
// alert(posMove + "+++++++++");
});
btnElem.addEventListener("touchend", function (event) {
event.preventDefault();
posEnd = 0;
posEnd = event.changedTouches[0].pageY; //获取终点坐标
// alert("End");
// alert(posEnd + "---------结束坐标");
if (posStart - posEnd < 150) {
// alert("发送成功");
that.save();
} else {
alert("取消发送");
// alert("Cancel");
}
that.modelIndex = 0;
that.showModel = false;
});
},
原文链接:https://blog.csdn.net/Zxf_xcn/article/details/121416215
所属网站分类: 技术文章 > 博客
作者：前端大师
链接：http://www.qianduanheidong.com/blog/article/237592/11792401fc7f545e77b3/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力