uniapp长按语音描述功能

在工作的时候还是会用到的一个功能。

长按语音描述会弹出正在录音的弹窗，上划一段距离会取消录音 并提示取消录音，录音完成当前的内容会变成微信能播放的状态 播放倒计时秒数 下面是效果图 可根据自己的样式需求去改变。

图1

图.2

html

主要分为两种状态：1.如果录音了 图2

                                2.没有录音  图1

弹出正在录音样式

弹出取消录音样式

<view class="vioce">
        <!-- 如果有录音 -->
        <block v-if="form.voice">
          <view class="voice_t" @click="play">
            <block v-if="playStatus">
              <image
                src="../../static/image/dongvoicewhite.gif"
                style="width: 32rpx; height: 32rpx"
              ></image>
            </block>
            <block v-else>
              <image
                src="../../static/image/voicewhite.png"
                style="width: 32rpx; height: 32rpx"
              ></image>
            </block>
            <text v-if="recordtime" class="voicetext">{
  { recordtime }}s</text>
          </view>
        </block>
        <!-- 没有录音 -->
        <block wx:else>
          <view
            class="startrecordbtn"
            @touchmove="touchMove"
            @touchstart="startHandel"
            @touchend="endHandle"
          >
            <text class="recordtext">语音描述</text>