vue 左右末端滑动导航

个人实际开发中用到的效果问题总结出来便于自己以后开发查看调用,如果也适用其他人请随意拿走勿喷就行!

介绍一下这个导航是什么，他是键盘事件左右键移动到可视窗口末端然后会滑动一个导航，一直移动一直滑动，直到最后一个停止，反方向一样。

当初有用vue input标签写过，其中有bug，就是光标在滑动的时候就失去控制了，所以我用原生js配合vue解决这个问题，下面是代码。

HTML代码

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <div>{{code[1].img}}</div>
    <img  alt="">
    <div style="534px;height:40px;border:1px #333 solid;margin: 50px auto;overflow: hidden;">
      <div id='div' style="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>