vue怎么實現一個滾動條樣式

這篇文章主要介紹了vue怎么實現一個滾動條樣式的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇vue怎么實現一個滾動條樣式文章都會有所收獲，下面我們一起來看看吧。

首先是滾動條樣式

<div class="scrollBar" v-if="roleList.length > 5">
        <div
          class="box"
          @mousedown="move"
          v-bind:style="{ width: activewidth + "px" }"
        ></div>
      </div>

樣式

.scrollBar {
  width: 500px;
  height: 6px;
  background: #d5dbf5;
  margin: 0 auto;
  margin-top: 72px;
  border-radius: 4px;
  position: relative;

  .box {
    width: 30px;
    height: 100%;
    background: #fff;
    border-radius: 4px;
    position: absolute;
    left: 0;
  }
  .box:hover {
    cursor: pointer;
  }
}

滾動區域的樣式這里就不寫了

1 首先是滾動條滑塊的寬度

mounted() {
    //滾動區域寬度  我這里是遍歷的user列表  所以我拿到列表的長度*每個li的寬度即為總寬度
    let bgWidth = this.$refs.liList.clientWidth * this.roleList.length;
    //可視區域寬度  1065   這個就是上圖中白色背景盒子的寬度
    //滑塊寬度 500為滾動條寬度  計算這個寬度是為了拿到滑塊可以滑動的距離 這個下面會說到
    this.activewidth = 500 * (1065 / bgWidth);
  },

2 給滑塊添加鼠標事件

move(e) {
      //獲取目標元素
      let odiv = e.target;
      // ScrollArea
      //算出鼠標相對元素的位置
      let disX = e.clientX - odiv.offsetLeft;
      //滾動條可以滾動的距離
      let viewArea = 500 - this.activewidth;
      //滾動區域寬度
      let bgWidth = this.$refs.liList.clientWidth * this.roleList.length;
      document.onmousemove = (e) => {
        //鼠標按下并移動的事件
        //用鼠標的位置減去鼠標相對元素的位置，得到元素的位置
        let left = e.clientX - disX;
        //left < 0 表示滑塊已經到最左邊
        //或者left > viewArea  表示滑塊到最右邊
        if (left < 0 || left > viewArea) {
          //console.log("到頭了");
          //這個時候要清空事件 不然滑塊就劃出滾動條區域了
          document.onmousemove = null;
        } else {
         //滑塊的滑動距離
          odiv.style.left = left + "px";
          //滾動區域的滑動距離 = 滾動區域寬度*(滑塊滑動的距離/500)
          this.$refs.ScrollArea.style.left =
            "-" + bgWidth * left / 500 + "px";
        }
      };
      document.onmouseup = (e) => {
        document.onmousemove = null;
        document.onmouseup = null;
      };
    },

關于“vue怎么實現一個滾動條樣式”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“vue怎么實現一個滾動條樣式”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。