mpvue vue touchstart touchend touchmove事件实现按住录音,上滑取消,下拉恢复 仅样式

 

 

需求: 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_release_to_cancel .png" />
        </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:''
    };
  },
  watch:{
  },
  mounted() {},
  methods: {
    // 手指开始触发
    touchstart(e) {
      let i = 1
      this.btRecoding = true
      this.blackBoxSpeak = true
      this.startY = e.clientY
      this.loop = setInterval(()=>{
        console.log(`${i++}`);           
      },1000)
    },
    // 手指离开屏幕触发
    touchend() {
      console.log(`结束`);
      clearTimeout(this.loop)
      this.btRecoding = false
      
    },
    // 滑动触发
    touchmove(e) {
      const endY = e.clientY
      if(this.startY<endY){
        this.blackBoxSpeak = true
      } else {
        this.blackBoxSpeak = false 
      }
    }
  },
};
</script>