原生JS控制手機瀏覽器左右滑動


問題描述:

實現h5頁面在瀏覽器中,實現左右滑動進行切換圖片

解決方法:

@touchstart.stop="touchstart" @touchend.stop="touchend"  滑動的方法
<div v-show="isWheel" id="main_box" class="see_big" @touchstart.stop="touchstart" @touchend.stop="touchend">
</div>

touchstart(e) {
      e.preventDefault() // 解決方案**
      this.startX = e.touches[0].clientX
      console.log(this.startX)
    },
    touchend(e) {
      e.preventDefault() // 解決方案**
      this.touchendX = e.changedTouches[0].clientX
      var endX = this.touchendX - this.startX
      console.log(endX)
      if (endX > 40) {
        if (this.imgSrc > 0) {
          this.imgSrc--
          console.log(this.imgSrc)
          this.bgsrc = this.imgArr[this.imgSrc]
        }
      } else if (endX < -40) {
        if (this.imgSrc < this.imgArr.length - 1) {
          this.imgSrc++
          console.log(this.imgSrc)
          this.bgsrc = this.imgArr[this.imgSrc]
        }
      }
    },

   e.preventDefault()  是禁止瀏覽器的默認行為,不然就會直接切換窗口


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM