problem description

add multiple videos and audio to < scroll > (multimedia files are determined by the file address and suffix coming from the background, and for+if is added to dom). The touchstart of better-scoll causes audio and video to be unable to press the play button

the environmental background of the problems and what methods you have tried

click is true in configuration. Tried to remove to listen for the event, but reported it incorrectly. Try adding @ ontouchStart to control audio playback, but pressing the volume button in this way will also control playback, and multiple audio cannot be controlled to play and pause with flag

related codes

/ / Please paste the code text below (do not replace the code with pictures)
the following is part of the page code

    <div class="survey-detail">
      <scroll class="list-survey" v-show="!showOver" :data="object" :mouseWheel="mouseWheel">
        <div class="survey-detail-wrapper">
           <div class="survey-detail-header" v-if="itemDetail.questionnaire">
          </div>
          <div class="survey-detail-content">
            <ul>
              <li v-for="(item, index) in object" :key="index" class="li-item">
                <p class="answer-bottom title" :class="{"choice":item.requiredFlag}">{{index + 1}}{{item.subject}} <span class="answer-type">({{type[item.type-1]}})</span>
                  <br/>
                  <img :src="mediaUrl + item.mediaAttachment.realpath" v-if="item.hasOwnProperty("mediaAttachment") && (item.mediaAttachment.extend.toLowerCase() =="jpg"|| item.mediaAttachment.extend.toLowerCase()=="jpeg" || item.mediaAttachment.extend.toLowerCase()=="png")" style="width: 70%;">
                  <video :src="mediaUrl + item.mediaAttachment.realpath" v-if="item.hasOwnProperty("mediaAttachment") && (item.mediaAttachment.extend.toLowerCase() == "mp4" || item.mediaAttachment.extend.toLowerCase() == "rmvb" || item.mediaAttachment.extend.toLowerCase() == "avi" || item.mediaAttachment.extend.toLowerCase() =="wma" || item.mediaAttachment.extend.toLowerCase() == "3gp" || item.mediaAttachment.extend.toLowerCase() =="mov" ||item.mediaAttachment.extend.toLowerCase() == "webm")" controls="controls" style="width: 70%;" controlsList="nodownload" oncontextmenu="return false"></video>
                  <audio :src="mediaUrl + item.mediaAttachment.realpath" v-if="item.hasOwnProperty("mediaAttachment") && (item.mediaAttachment.extend.toLowerCase() =="mp3"|| item.mediaAttachment.extend.toLowerCase()=="ape" || item.mediaAttachment.extend.toLowerCase()=="flac")" style="width:90%" controls="controls"  controlsList="nodownload" oncontextmenu="return false"></audio>
                

           

the following is the better-scroll code

<template>
  <div ref="wrapper">
    <slot></slot>
  </div>
</template>

<script >
import BScroll from "better-scroll"

export default {
  props: {
    probeType: {
      type: Number,
      default: 1
    },
    click: {
      type: Boolean,
      default: true
    },
    tap: {
      type: Boolean,
      default: true
    },
    listenScroll: {
      type: Boolean,
      default: false
    },
    data: {
      type: Array,
      default: null
    },
    pullup: {
      type: Boolean,
      default: true
    },
    pulldown: {
      type: Boolean,
      default: true
    },
    // 
    mouseWheel: {
      type: Boolean,
      default: false
    },
    beforeScroll: {
      type: Boolean,
      default: false
    },
    refreshDelay: {
      type: Number,
      default: 20
    }
  },
  mounted() {
    setTimeout(() => {
      this._initScroll()
    }, 20)
  },
  methods: {
    _initScroll() {
      if (!this.$refs.wrapper) {
        return
      }
      this.scroll = new BScroll(this.$refs.wrapper, {
        probeType: this.probeType,
        click: this.click,
        mouseWheel: this.mouseWheel
      })
      if (this.listenScroll) {
        let me = this
        this.scroll.on("scroll", (pos) => {
          me.$emit("scroll", pos)
        })
      }
      // 
      if (this.pullup) {
        this.scroll.on("scrollEnd", () => {
          if (this.scroll.y <= (this.scroll.maxScrollY + 50)) {
            this.$emit("scrollToEnd")
          }
        })
      }
      // 
      if (this.pulldown) {
        this.scroll.on("touchEnd", (pos) => {
          // 
          if (pos.y > 50) {
            this.$emit("pulldown")
          }
        })
      }

      if (this.beforeScroll) {
        this.scroll.on("beforeScrollStart", () => {
          this.$emit("beforeScroll")
        })
      }
    },
    disable() {
      this.scroll && this.scroll.disable()
    },
    enable() {
      this.scroll && this.scroll.enable()
    },
    refresh() {
      this.scroll && this.scroll.refresh()
    },
    scrollTo() {
      this.scroll && this.scroll.scrollTo.apply(this.scroll, arguments)
    },
    scrollToElement() {
      this.scroll && this.scroll.scrollToElement.apply(this.scroll, arguments)
    }
  },
  watch: {
    data() {
      setTimeout(() => {
        this.refresh()
      }, this.refreshDelay)
    }
  }
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">

</style>
     

what result do you expect? What is the error message actually seen?