技術標籤：遇到的問題

這裡寫自定義目錄標題

• 使用bootstrap的輪播
• • 輪播程式碼（不能觸控滑動）
  • 新增觸控事件

使用bootstrap的輪播

我最近寫vue專案用到了bootstrap框架,其中輪播圖我用的是bootstrap自帶的輪播。但是變成手機端時，觸控無法滑動輪播圖片，所以我在網上找了其他人的部落格來解決這個問題，我的程式碼就是結合他們的部落格寫的，他們部落格地址在下面：

移動端touch事件—利用bootstrap實現輪播圖手指左右滑動事件
Vue 獲取滑鼠位置座標

為了記錄知識點而寫的部落格筆記：）

輪播程式碼（不能觸控滑動）

<div class="
 
banner   col-sm-12 col-md-12 col-lg-12">
          <div id="carouselExampleIndicators" class=" carousel slide " data-ride="carousel">
            <ol class="carousel-indicators">
              <li data-target="#carouselExampleIndicators"
 
 data-slide-to="0" class="active"></li>
              <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
              <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
              <
 
li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
              <li data-target="#carouselExampleIndicators" data-slide-to="4"></li>
            </ol>
            <div class="carousel-inner">
              <div class="carousel-item active">
                <img src="./show_file/103.png" class="d-block w-100" alt="...">
              </div>
              <div class="carousel-item">
                <img src="./show_file/103.png" class="d-block w-100" alt="...">
              </div>
              <div class="carousel-item">
                <img src="./show_file/103.png" class="d-block w-100" alt="...">
              </div>
              <div class="carousel-item">
                <img src="./show_file/103.png" class="d-block w-100" alt="...">
              </div>
              <div class="carousel-item">
                <img src="./show_file/103.png" class="d-block w-100" alt="...">
              </div>
            </div>
            <a class="carousel-control-prev nocolor" href="#carouselExampleIndicators" role="button" data-slide="prev">
              <span class="carousel-control-prev-icon" aria-hidden="true"></span>
              <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next nocolor" href="#carouselExampleIndicators" role="button" data-slide="next">
              <span class="carousel-control-next-icon" aria-hidden="true"></span>
              <span class="sr-only">Next</span>
            </a>
          </div>
        </div>

新增觸控事件

在輪播的容器裡carousel新增觸控事件：

<div id="carouselExampleIndicators" class=" carousel slide " data-ride="carousel"  @touchstart="touchstart" @touchmove="touchmove"  @touchend="touchmove">
<div>
...

vue:

data(){
    return {
      //起始位置X
      startX:0,
      //結束位置X
      endX:0,
      //距離
      distance:0
    }
  },
  ...
  methods:{
    // 當滑鼠點選時觸發，類似onclick事件
    touchstart(e) {
      if(e){
        // console.log(e.targetTouches[0].clientX);
        this.startX = e.targetTouches[0].clientX;
      }

    },
    // 當滑鼠移動時觸發
    touchmove(e) {
      if(e){
        // console.log(e.targetTouches[0].clientX);
        this.endX = e.targetTouches[0].clientX;
      }
    },
    //當滑鼠移動時觸發
    touchend(e) {
      this.distance = Math.abs(startX - endX);
      if (this.distance > 50){//如果滑動距離大於50
        //說明有方向的變化
        //根據獲得的方向 判斷是上一張還是下一張出現
        this.carousel(startX >endX ? 'next':'prev');
      }
    },
  
  },