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實現菜單移動輪播二