SOURCE

/*
 * @Date: 2020-02-19 14:36:35
 * @LastEditors: bhwa233
 * @LastEditTime: 2020-04-19 23:24:20
 */
new Vue({

    el: "#app",
    name: 'HorizontalList',
    props: {
        data: {
      type: Array,
      default: () => {
        return [
          {
            title: '小明',
            icon:
              'https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top-e3b63a0b1b.png',
          },
          {
            title: '小红',
            icon:
              'https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top-e3b63a0b1b.png',
          },
          {
            title: '小明',
            icon:
              'https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top-e3b63a0b1b.png',
          },
          {
            title: '小红',
            icon:
              'https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top-e3b63a0b1b.png',
          },
          {
            title: '小明',
            icon:
              'https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top-e3b63a0b1b.png',
          },
          {
            title: '小红小红小红小红小红小红小红小红小红小红小红小红',
            icon:
              'https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top-e3b63a0b1b.png',
          },
          {
            title: '小明',
          },
          {
            title: '小红',
            icon:
              'https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top-e3b63a0b1b.png',
          },
        ];
      },
    },
    itemWidth: {
      type: Number,
      default: 160,
    },
    },
    data() {
        return {
            offsetIndex: 0,
        };
    },
    computed: {
        offset() {
            return {
                right: `${this.offsetIndex * this.itemWidth}px`,
            };
        },
        leftmost() {
            return this.offsetIndex === 0;
        },
        rightmost() {
            if (this.data.length < 6) {
                return true;
            } else {
                return this.offsetIndex + 6 >= this.data.length;
            }
        },
    },
    methods: {
        indexChange(number) {
            this.offsetIndex += number;
        },
        itemClick(item) {
            this.$emit('itemClick', item);
        },
    },
}
)

<div id="app">
	<div class="horizontal-list">
		<div class="arrow-content">
			<i v-show="!leftmost" class=" arrow el-icon-arrow-left cp mr10" @click="indexChange(-1)"></i>
    </div>
    <div class="card-content">
      <div class="card-list" :style="offset">
        <div v-for="(item, index) in data" :key="index">
          <div class="content-card" @click="itemClick(item)">
            <div class="content-container cp">
              <el-image :src="item.icon"> </el-image>
              <div class="theme-name" :title="item.title">
                {{ item.title }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="arrow-content">
      <i v-show="!rightmost" class=" arrow el-icon-arrow-right cp ml10" @click="indexChange(1)"></i>
    </div>
  </div>
</div>

.horizontal-list {
    min-height: 225px;
    display: flex;
    align-items: center
}

.horizontal-list .arrow-content {
    width: 120px;
    text-align: center
}

.horizontal-list .arrow-content .arrow {
    font-size: 50px;
    color: #47a2ff
}

.horizontal-list .card-content {
    width: 960px;
    overflow: hidden
}

.horizontal-list .card-content .card-list {
    display: flex;
    align-items: center;
    margin: 0 auto;
    position: relative;
    transition: right .5s ease
}

.horizontal-list .card-content .card-list .content-card {
    text-align: center;
    margin: 10px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 160px
}

.horizontal-list .card-content .card-list .content-card .content-container {
    cursor: pointer
}

.horizontal-list .card-content .card-list .content-card .content-container .el-image__error,
.horizontal-list .card-content .card-list .content-card .content-container .el-image {
    width: 150px;
    height: 150px
}

.horizontal-list .card-content .card-list .content-card .content-container .el-image__error:hover,
.horizontal-list .card-content .card-list .content-card .content-container .el-image:hover {
    opacity: .8
}

.horizontal-list .card-content .card-list .content-card .content-container .theme-name {
    margin-top: 10px;
    color: #47a2ff;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all
}