vue页面左右箭头手动切换中间app列表

xu_duo_i

于 2024-07-30 16:11:42 发布

阅读量266

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/xu_duo_i/article/details/140798743

版权

1 效果:

2 HTML代码分析:

HTML代码:

 <div class="all_app">
        <div class="app-container">
          <el-button icon="el-icon-arrow-left" circle @click="switchList('left')"></el-button>
          <div class="middle-list">
            <div v-for="allAppItem in displayedList" :key="allAppItem.menuId">
              <div class="all_app_item">
               
                <svg-icon
                  :icon-class="allAppItem.items.icon"
                  @click="submitBreakUp(allAppItem)"
                  class="icon_class"
                ></svg-icon>
                <span class="icon_name" :title="allAppItem.items.menuName">
                  {{
                  allAppItem.items.menuName
                  }}
                </span>
              </div>
            </div>
          </div>
          <el-button icon="el-icon-arrow-right" circle @click="switchList('right')"></el-button>
        </div>
      </div>

3 computed:代码分析

代码:

 computed: {
    displayedList() {
      // 返回当前索引对应的列表
      return this.breakUpList.slice(this.currentIndex, this.currentIndex + 5);
    }
  },

4 方法分析:(注意-5前边判断length的数组)

代码:

  switchList(direction) {
      if (direction === "left") {
        this.currentIndex = Math.max(this.currentIndex - 1, 0);
      } else if (direction === "right") {
        this.currentIndex = Math.min(
          this.currentIndex + 1,
          this.breakUpList.length - 5
        );
      }
    },

5 scss样式:(我这里就大概给一下,具体样式还得根据具体需求自己写)

.app-container {
  display: flex;
  align-items: center;
  width: 100%;
}
.middle-list {
  margin: 0 10px;
  width: 100%;
  display: flex;
  align-items: center;
}
.all_app {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 0 20px;

    .all_app_item {
      width: calc(100% / 8);
      display: flex;
      float: left;
      flex-direction: column;
      align-items: center;
    }
  }
.icon_name {
  font-size: calc(var(--size) - 2px);
  overflow: hidden;
  box-sizing: border-box;
  max-width: 70%;
  transform: translate3d(0, 0, 0);
  text-align: left;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #333;
  font-weight: 400;
}
.icon_class {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  cursor: pointer;
  margin: 10px 28px;
  transition: transform 0.2s;

  &:hover {
    transform: scale(1.1, 1.1);
  }
}