mpvue vue 长按录音,上滑取消,下拉恢复

最新推荐文章于 2024-08-29 11:58:20 发布

SangHongxv

最新推荐文章于 2024-08-29 11:58:20 发布

阅读量1.3k

点赞数 2

分类专栏：奇技淫巧文章标签： vue 录音微信 mpvue

本文链接：https://blog.csdn.net/SangHongxv/article/details/108602999

版权

奇技淫巧专栏收录该内容

30 篇文章 0 订阅

订阅专栏

需求: mpvue 开发小程序实现按住录音上滑取消,下拉恢复

知识点: touchstart touchend touchmove 事件

效果:

<button
      @touchstart="touchstart"
      @touchend="touchend"
      @touchmove="touchmove"
    >{{btRecoding?'松开结束':'按住说话'}}</button>
    <div class="shade" v-if="btRecoding" catchtouchmove="ture">
      <div class="blackBoxSpeak" v-if="blackBoxSpeak">
        <div>
          <img src="https://gitee.com/sanghongxv/blogImage/raw/master/ic_record.gif" />
        </div>
        <div class="blackBoxSpeakConent">手指上划，取消录制</div>
      </div>
      <div class="blackBoxPause" v-else>
        <img src="https://gitee.com/sanghongxv/blogImage/raw/master/ic_release_to_cancel.png" />
        <div class="blackBoxSpeakConent" style="background:red">松开手指，取消录制</div>
      </div>
    </div>

catchtouchmove="ture" 阻止页面滚动

<style lang="scss" scoped>
button{
  z-index: 999;
  position: absolute;
  bottom: 0;
}
.shade {
  z-index: 998;
  position: absolute;
  top: 0;
  width: 100vw;
  height: 100vh;
  img {
    width: 148rpx;
    height: 246rpx;
  }
  .blackBoxSpeak,
  .blackBoxPause {
    width: 343rpx;
    height: 343rpx;
    border-radius: 24rpx;
    background-color: rgba($color: #000000, $alpha: 0.7);
    margin: auto;
    padding: 32rpx;
    position: relative;
    text-align: center;
    top: 188rpx;
  }
  .blackBoxSpeakConent {
    position: absolute;
    bottom: 24rpx;
    color: #fff;
    text-align: center;
    font-size: 30rpx;
    padding: 12rpx 0;
    width: 85%;
    margin: auto;
    border-radius: 16rpx;
  }
}
</style>

<script>
export default {
  name: '',
  data() {
    return {
      loop:'',
      btRecoding:false,
      blackBoxSpeak:false,
      startY:'',
      timeOutEvent:0
    };
  },
  watch:{
  },
  mounted() {},
  methods: {
    // 手指开始触发
    touchstart(e) {
      let i = 1
      this.blackBoxSpeak = true
      this.startY = e.clientY
      // 每1秒打印一次(无实质用途)
      this.loop = setInterval(()=>{
        console.log(`${i++}`);           
      },1000)
      this.timeOutEvent = 0
      // 长按1000毫秒后执行
      this.timeOutEvent = setTimeout(()=>{
        this.startRecord()
      },1000)
      return false
    },
    // 长按超过1000毫秒
    startRecord(){
       // 调用录音方法
       this.btRecoding = true
    },
    // 短按
    startRecordClick(){
      // 长按没有超过1000毫秒
    },
    // 手指离开屏幕触发
    touchend() {
      console.log(`结束`);
      clearTimeout(this.loop)
      clearTimeout(this.timeOutEvent)
      if (_this.timeOutEvent == 0) {
        this.startRecordClick()
      } else {
        this.btRecoding = false
        // 长按结束调用保存录音或者其实事件
      } 
    },
    // 滑动触发
    touchmove(e) {
      const endY = e.clientY
      if(this.startY<endY){
        this.blackBoxSpeak = true
      } else {
        this.blackBoxSpeak = false 
      }
    }
  },
};
</script>