vue.js+element-ui实现菜单移动轮播一

简单来说，就是页面上有几个菜单按钮，类似V字行排列，中间为选中的，点哪个哪个移动到中间。

1.绝对定位，菜单坐标用left和top定位，注意添加动效属性：transition；

<el-row class="setPosition borderBox" v-for="(item,index) in list" :key="index" :style="styleList[indexList[index]]">
        <span class="titleText" :style="styleList[indexList[index]].textStyle" @click="moveToCenter(indexList[index])">{{index}}{{item.title}}</span>
</el-row>

2.styleList数组；

　　   list: [{ title: "吃饭" }, { title: "睡觉" }, { title: "打游戏" }, { title: "逛街" }, { title: "撩妹" }],

      indexList: [], //下标列表

      centerNum: 0, //中间位置的下标

      styleList: [

        {

          width: "160px",

          height: "240px",

          top: "280px",

          left: "0",

          transition: "left 0.4s linear, top 0.4s linear, width 0.4s linear,height 0.4s linear",

          textStyle: {

            fontSize: "28px",

            lineHeight: "28px",

            transition: "font-size 0.4s linear, line-height 0.4s linear"

          }

        },

        {

          width: "180px",

          height: "260px",

          top: "350px",

          left: "260px",

          transition: "left 0.4s linear, top 0.4s linear, width 0.4s linear,height 0.4s linear",

          textStyle: {

            fontSize: "34px",

            lineHeight: "34px",

            transition: "font-size 0.4s linear, line-height 0.4s linear"

          }

        },

        {

          width: "200px",

          height: "280px",

          top: "420px",

          left: "530px",

          transition: "left 0.4s linear, top 0.4s linear, width 0.4s linear,height 0.4s linear",

          textStyle: {

            fontSize: "40px",

            lineHeight: "40px",

            transition: "font-size 0.4s linear, line-height 0.4s linear"

          }

        },

        {

          width: "180px",

          height: "260px",

          top: "350px",

          left: "820px",

          transition: "left 0.4s linear, top 0.4s linear, width 0.4s linear,height 0.4s linear",

          textStyle: {

            fontSize: "34px",

            lineHeight: "34px",

            transition: "font-size 0.4s linear, line-height 0.4s linear"

          }

        },

        {

          width: "160px",

          height: "240px",

          top: "280px",

          left: "1100px",

          transition: "left 0.4s linear, top 0.4s linear, width 0.4s linear,height 0.4s linear",

          textStyle: {

            fontSize: "28px",

            lineHeight: "28px",

            transition: "font-size 0.4s linear, line-height 0.4s linear"

          }

        }

      ]

3.methods方法

　　 //初始化下标数组，num为数组长度
    initIndexList(num) {
      this.indexList = [];
      for (var i = 0; i < num; i++) {
        this.indexList[i] = i;
      }
    },
    moveToCenter(index) {
      const that = this;
      var count = this.centerNum;
      if (index > count) {
        that.moveToLeft();
        var interval = setInterval(function() {
          if (index > count + 1) {
            that.moveToLeft();
            count++;
          } else {
            clearInterval(interval);
          }
        }, 4 * 100);
      } else if (index < count) {
        that.moveToRight();
        var interval = setInterval(function() {
          if (index < count - 1) {
            that.moveToRight();
            count--;
          } else {
            clearInterval(interval);
          }
        }, 4 * 100);
      }
    },
    //菜单整体向左移一位，下标数组向右移一位
    moveToRight() {
      this.indexList = this.indexList.splice(1, this.indexList.length).concat(this.indexList);
    },
    //菜单 整体向右移一位，下标数组向左移一位
    moveToLeft() {
      this.indexList = this.indexList.splice(this.indexList.length - 1, this.indexList.length).concat(this.indexList);
    }
  }

4.style样式

<style scoped>
#myMenu {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.nav {
  width: 1260px;
  height: 700px;
  margin: 0 auto;
  background: #0157909d;
}
.setPosition {
  position: absolute;
}
.borderBox {
  border: 1px red solid;
  text-align: center;
}
.titleText {
  font-weight: 400;
  text-align: center;
  font-family: Microsoft YaHei;
  cursor: pointer;
}
</style>

5.实现效果，

6.移动时，首部和尾部总是会直接向最前或最后移动，看着很不舒服，

一般上来讲，应该是左移时，第一个向左移出，再从右移入，右移时，最后一个向右移出，再从左移入。

后续优化请看下一篇@vue.js+element-ui实现菜单移动轮播二