动态展示列表头像名字

动态展示列表头像名字

公司最新老用到头像和名称的展示，有大头像有小头像，都是根据此代码逻辑实现，可以封装为组件动态传高宽，自适应展示，给自己留个底层代码实现框架，复制粘贴可用才是王道。
效果图：
头像大于小于6个时：

头像大于大于6个时：

切换效果

HTML代码

<template>
    <div class="champion">
        <div class="main">
            <div class="arrow-left" @click="moveLeft" v-if="this.avatarList.length>6">
                <a-icon type="left" />
            </div>
            <div class="avatar-list">
                <div class="avatar-item" :style="moveItem" :class="this.avatarList.length<6?'space-between':''">
                    <div class="box" v-for="(item,index) in avatarList" :key="index">
                        <div><img src="https://img2.baidu.com/it/u=3317874225,1892163514&fm=253&fmt=auto&app=138&f=JPEG?w=236&h=236" alt=""></div>
                        <div class="name">{{item.name}}</div>
                    </div> 
                </div>
            </div>
            <div class="arrow-right" @click="moveRight" v-if="this.avatarList.length>6">
                <a-icon type="right" />
            </div>
        </div>
      
    </div>
</template>

JS代码

<script>
export default {
  data () {
    return {
      currentIndex:0,
      moveWidht: 0,
      avatarList: [
        {url:'../../../../assets/stadium/jiaolian.jpg',name:'刘梓毅1'},
        {url:'../../../../assets/stadium/jiaolian.jpg',name:'刘梓毅2'},
        {url:'../../../../assets/stadium/jiaolian.jpg',name:'刘梓毅3'},
        {url:'../../../../assets/stadium/jiaolian.jpg',name:'刘梓毅4'},
        // {url:'../../../../assets/stadium/jiaolian.jpg',name:'刘梓毅5'},
        // {url:'../../../../assets/stadium/jiaolian.jpg',name:'刘梓毅6'},
        // {url:'../../../../assets/stadium/jiaolian.jpg',name:'刘梓毅7'},
        // {url:'../../../../assets/stadium/jiaolian.jpg',name:'刘梓毅8'},
        // {url:'../../../../assets/stadium/jiaolian.jpg',name:'刘梓毅9'},
        // {url:'../../../../assets/stadium/jiaolian.jpg',name:'刘梓毅10'},
      ]
    }
  },
  methods: {
    moveLeft () {
      if (this.currentIndex >0) {
        this.currentIndex--
        if(this.currentIndex == 1){
          this.moveWidht = (160 * this.currentIndex+6*this.currentIndex)*-1
        }else{
          this.moveWidht = (160 * this.currentIndex+6*this.currentIndex)*-1
        }
      }
      
    },
    moveRight () {
      if (this.currentIndex < this.avatarList.length-6) {
        this.currentIndex++
        if(this.currentIndex == this.avatarList.length-6){
          this.moveWidht = (160 * this.currentIndex+6*this.currentIndex)*-1
        }else{
          this.moveWidht = (160 * this.currentIndex+6*this.currentIndex)*-1
        }
      }
    }
  },
  computed: {
    moveItem () {
      return  {
        transform: `translateX(${this.moveWidht}px)`
      }
    },
  },
}
</script>

CSS代码

<style lang="scss" scoped>
.champion{
    width: 100%;
    height: 420px;
    background: url('../../../../assets/stadium/champion.jpg') 100% 100% no-repeat;
    background-position: 50% 0%;
    background-size: cover;
    box-sizing: border-box;
    .main{
        width: 1200px;
        margin: 0 auto;
        overflow: hidden;
        box-sizing: border-box;
        height: 420px;
        position: relative;
        // 左箭头
        .arrow-left{
            position: absolute;
            top: 210px;
            left: 0;
            transform: translateY(-50%);
            width: 60px;
            height: 60px;
            border-radius: 60px;
            background-color: rgba(204, 204, 204,0.5);
            text-align: center;
            line-height: 60px;
            font-size: 26px;
            color: white;
            cursor: pointer;
            z-index: 999;
        }
        // 右箭头
        .arrow-right{
            position: absolute;
            top: 210px;
            right: 0;
            transform: translateY(-50%);
            width: 60px;
            height: 60px;
            border-radius: 60px;
            background-color: rgba(204, 204, 204,0.5);
            text-align: center;
            line-height: 60px;
            font-size: 26px;
            color: white;
            cursor: pointer;
            z-index: 999;
        }
        // 人物列表
        .avatar-list{
            height: 420px;
            box-sizing: border-box;
            margin-left: 80px;
            margin-right: 80px;
            overflow: hidden;
            
            .avatar-item{
                height: 200px;
                color: white;
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                padding-top: 150px;
                transition: 0.5s ease;
                .box {
                    text-align: center;
                    width: 200px;
                    margin-left: 20px;
                    img{
                        width: 150px;
                        height: 150px;
                        border-radius: 140px;
                    }
                    .name{
                        line-height: 50px;
                        font-size: 18px;
                    }
                }
              
            }
            .space-between{
                justify-content: space-between;
            }
        }
    }
   
}
</style>