本站消息

站长简介/公众号


站长简介:高级软件工程师,曾在阿里云,每日优鲜从事全栈开发工作,利用周末时间开发出本站,欢迎关注我的微信公众号:程序员总部,程序员的家,探索程序员的人生之路!分享IT最新技术,关注行业最新动向,让你永不落伍。了解同行们的工资,生活工作中的酸甜苦辣,谋求程序员的最终出路!

 价值13000svip视频教程,前端大神匠心打造,零基础前端开发工程师视频教程全套,基础+进阶+项目实战,包含课件和源码

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

2021-01(106)

2021-02(2466)

2021-03(432)

2021-04(179)

2021-05(197)

上划取消,松开发送,移动端移动

发布于2021-11-20 18:17     阅读(402)     评论(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/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

15 0
收藏该文
已收藏

评论内容:(最多支持255个字符)