vue 左右末端滑動導航

個人實際開發中用到的效果問題總結出來便於自己以后開發查看調用,如果也適用其他人請隨意拿走勿噴就行!

介紹一下這個導航是什么，他是鍵盤事件左右鍵移動到可視窗口末端然后會滑動一個導航，一直移動一直滑動，直到最后一個停止，反方向一樣。

當初有用vue input標簽寫過，其中有bug，就是光標在滑動的時候就失去控制了，所以我用原生js配合vue解決這個問題，下面是代碼。

HTML代碼

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <div>{{code[1].img}}</div>
    <img  alt="">
    <div style="width:534px;height:40px;border:1px #333 solid;margin: 50px auto;overflow: hidden;">
      <div id='div' style="width:100%;height:40px;white-space:nowrap;transition: transform .5s;transform: translateX(0) translateY(0);">
         <span
         class="input"
         v-for="(itme,index) in data"
         style="margin-right: 30px;line-height:40px;display:inline;border:0;"
         :class="ID == index ? color : ''">{{itme}}</span>
      </div>
    </div>{{ID}}{{rightWidth}}
  </div>
</template>

CSS代碼

<style scoped>
  *{
    margin: 0;
    padding:0;
  }
  .color{
    background: aqua;
  }
  
</style>

JS代碼

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      code:['111',{img:'../../build/logo.png'}],
      data:['十萬個冷笑話','妖怪名單','狐妖小紅娘','一人之下','王牌御史','海賊王','火影忍者','七龍珠','通職者'],
      ID:0,
      color:'color',
      right:0,  //存儲可視寬度
      rightID:0,  //過渡id
      rightWidth:0  //過渡距離
    }
  },
  mounted(){
    var testLength = document.getElementsByClassName('input');
    for(var f = 0;f < testLength.length;f++){
      testLength[f].style.width = testLength[f].value.length * 14 + 'px';
    }
  },
  created() {  
    var _this = this;
    document.addEventListener("keydown", _this.watchEnter);
  },  
  destroyed() {
    //移除監聽左右按鍵
    var _this = this;
    document.removeEventListener("keydown", _this.watchEnter);
  },
  methods:{
    //監聽左右按鈕事件
    watchEnter(e) {
      var oDiv = document.getElementById('div');
      var keyNum = window.event ? e.keyCode : e.which; //獲取被按下的鍵值
      //判斷如果用戶按下了左右鍵（keycody=39 37）
      if (keyNum == 39) {
        if(this.ID < oDiv.childNodes.length -1){
          var rightOffsetWidth = this.right + oDiv.childNodes[this.ID].offsetWidth + 30;
          this.right = rightOffsetWidth;
        }
        if(this.right >= oDiv.offsetWidth - 34 && this.ID < oDiv.childNodes.length -1){
          var _rightOffsetWidth = this.rightWidth + oDiv.childNodes[this.rightID].offsetWidth + 30;
          oDiv.style.transform = 'translateX(-'+_rightOffsetWidth+'px) translateY(0)';
          this.rightWidth = _rightOffsetWidth;
          this.rightID+=1;
          this.right = this.right - oDiv.childNodes[this.rightID].offsetWidth - 30;
        }
        if(this.ID >= oDiv.childNodes.length -1){
          this.ID = oDiv.childNodes.length -1;
        }else{
          this.ID+=1;
        }
      }else if(keyNum == 37){
        if(this.ID > 0){
          if(this.ID == 0){
            var leftOffsetWidth = this.right - oDiv.childNodes[this.ID].offsetWidth - 30;
          }else{
            var leftOffsetWidth = this.right - oDiv.childNodes[this.ID - 1].offsetWidth - 30;
          }
          this.right = leftOffsetWidth;
        }else{
          this.right = 0;
        }
        if(this.right < 0 && this.ID > 0){
          if(this.rightID == 0){
            var _leftOffsetWidth = this.rightWidth - oDiv.childNodes[this.rightID].offsetWidth - 30;
            var leftRight = oDiv.childNodes[this.rightID].offsetWidth + 30;
          }else if(this.rightID > 0){
            var _leftOffsetWidth = this.rightWidth - oDiv.childNodes[this.rightID - 1].offsetWidth - 30;
            var leftRight = oDiv.childNodes[this.rightID - 1].offsetWidth + 30;
          }
          oDiv.style.transform = 'translateX(-'+_leftOffsetWidth+'px) translateY(0)';
          this.rightWidth = _leftOffsetWidth;
          this.rightID-=1;
          this.right = this.right + leftRight;
        }
        if(this.ID <= 0){
          this.ID = 0;
        }else{
          this.ID-=1;
        }
      }
    },
  }
}
</script>