您的位置：首页 > 移动开发 > 微信开发

js原生touch事件实现微信语音按住录音，上滑取消。

2017-10-31 09:58 716 查看

由于在微信公众号上要开发语音聊天功能，前端需求就需要有一个类似微信的语音聊天，我看了下微信的语音，操作流程就是按住录音，滑动超出一定距离就取消发送。

需求确定了，下面就是敲代码了

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>lee-voice</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html,body{
background: #fff;
}
.btn{
position: fixed;
bottom: 0;
width: 100%;
height: 150px;
background: #eee;
}
.btn input{
width: 100%;
height: 100%;
font: 50px/150px 'microsoft yahei';
}
</style>
</head>
<body>
<div class="btn">
<input type="button" name="" id="messageBtn" value="按住 说话">
</div>
<script type="text/javascript">
var btnElem=document.getElementById("messageBtn");//获取ID
var posStart = 0;//初始化起点坐标
var posEnd = 0;//初始化终点坐标
var posMove = 0;//初始化滑动坐标
console.log(screen);
function initEvent() {
btnElem.addEventListener("touchstart", function(event) {
event.preventDefault();//阻止浏览器默认行为
posStart = 0;
posStart = event.touches[0].pageY;//获取起点坐标
btnElem.value = '松开 结束';
console.log("start");
console.log(posStart+'---------开始坐标');
});
btnElem.addEventListener("touchmove", function(event) {
event.preventDefault();//阻止浏览器默认行为
posMove = 0;
posMove = event.targetTouches[0].pageY;//获取滑动实时坐标
if(posStart - posMove < 500){
btnElem.value = '松开 结束';
}else{
btnElem.value = '松开手指，取消发送';
}
/*console.log(posStart+'---------');
console.log(posMove+'+++++++++');*/
});
btnElem.addEventListener("touchend", function(event) {
event.preventDefault();
posEnd = 0;
posEnd = event.changedTouches[0].pageY;//获取终点坐标
btnElem.value = '按住 说话';
console.log("End");
console.log(posEnd+'---------结束坐标');
if(posStart - posEnd < 500 ){
console.log("发送成功");
save();
}else{
console.log("取消发送");
console.log("Cancel");
};
});
};
initEvent();
function save(){
//ajax
console.log('Success');
}
</script>
</body>
</html>

全部的核心代码都在这，可以直接复制粘贴打开运行，注意：推荐在Chrome浏览器按F12 开启手机浏览模式运行。注意看打印消息。

好，今天都到这。

每天一点点，砸锅盖大楼。

参考网站：http://www.uw3c.com/jsviews/js52.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： js touch 微信语音聊天前端

相关文章推荐

新的分享

章节导航