vue实现人员展示页面

vue实现人员展示页面

功能描述

1. 实现人员展示
2. 实现无限滚动添加

display.vue

<template>
  <div class="display">
    <div class="displayBox">
      <header>
        <span>人员展示页面</span>
      </header>
      <div class="displayL">
        <ul class="personalDiaplayLine">
          <li v-for=" ( item,index ) in personalDiaplayLine" :key="index">
            <ul>
              <li v-for="( ite,ind ) in personalDiaplay" :key="ind ">
                <img :src="ite.url" alt="" width="100%" height="87%">
                <span>{{ ite.title }}</span>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      personalDiaplayLine: null,
      personalDiaplay: [
        { title: '江户时代那时的撒娇', url: require('@/assets/avatar.jpg') },
        { title: '是中国时代好青年', url: require('@/assets/avatar.jpg') },
        { title: '是中国时代好青年', url: require('@/assets/avatar.jpg') },
        { title: '是中国时代好青年', url: require('@/assets/avatar.jpg') },
        { title: '是中国时代好青年', url: require('@/assets/avatar.jpg') },
        { title: '是中国时代好青年', url: require('@/assets/avatar.jpg') },
        { title: '是中国时代好青年', url: require('@/assets/avatar.jpg') },
        { title: '是中国时代好青年', url: require('@/assets/avatar.jpg') },
        { title: '是中国时代好青年', url: require('@/assets/avatar.jpg') },
        { title: '是中国时代好青年', url: require('@/assets/avatar.jpg') },
        { title: '是中国时代好青年', url: require('@/assets/avatar.jpg') },
        { title: '为人正直，乐于助人是中国时代好青年', url: require('@/assets/avatar.jpg') },
        { title: '为人正直，乐于助人是中国时代好青年', url: require('@/assets/avatar.jpg') },
        { title: '为人正直，乐于助人是中国时代好青年', url: require('@/assets/avatar.jpg') },
        { title: '为人正直，乐于助人是中国时代好青年', url: require('@/assets/avatar.jpg') },
        { title: '为人正直，乐于助人是中国时代好青年', url: require('@/assets/avatar.jpg') },
        { title: '是中国时代好青年', url: require('@/assets/avatar.jpg') },
        { title: '是中国时代好青年', url: require('@/assets/avatar.jpg') },
        { title: '是中国时代好青年', url: require('@/assets/avatar.jpg') },
        { title: '是中国时代好青年', url: require('@/assets/avatar.jpg') },
        { title: '是中国时代好青年', url: require('@/assets/avatar.jpg') },
        { title: '是中国时代好青年', url: require('@/assets/avatar.jpg') },
        { title: '是中国时代好青年', url: require('@/assets/avatar.jpg') },
        { title: '是中国时代好青年', url: require('@/assets/avatar.jpg') },
        { title: '是中国时代好青年', url: require('@/assets/avatar.jpg') },
        { title: '是中国时代好青年', url: require('@/assets/avatar.jpg') },
        { title: '为人正直，乐于助人是中国时代好青年', url: require('@/assets/avatar.jpg') },
        { title: '为人正直，乐于助人是中国时代好青年', url: require('@/assets/avatar.jpg') },
        { title: '为人正直，乐于助人是中国时代好青年', url: require('@/assets/avatar.jpg') },
        { title: '为人正直，乐于助人是中国时代好青年', url: require('@/assets/avatar.jpg') },
        { title: '为人正直，乐于助人是中国时代好青年', url: require('@/assets/avatar.jpg') },
        { title: '是中国时代好青年', url: require('@/assets/avatar.jpg') }
      ]
    }
  },
  mounted() {
    this.sumLine()
  },
  methods: {
    sumLine() {
      if (parseInt(this.personalDiaplay.length / 9) < 1) {
        this.personalDiaplayLine = 1
      } else {
        this.personalDiaplayLine = parseInt(this.personalDiaplay.length / 9)
      }
    }
  }
}
</script>
<style lang="scss" scoped >
*{
  margin: 0;
  padding: 0;
  list-style: none;
}
.display {
  width: 100%;
  height: 100%;
  background-color: salmon;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #eff1f4;
}
header {
  width: 100%;
  height: 60px;
  line-height: 60px;
  border-bottom: 1px solid #f0f0f0;
}
header span {
  font-size: 20px;
  letter-spacing: 1px;
  margin-left: 2%;
}
.displayBox {
  width: 98%;
  height: 98%;
  background-color: white;
}
.displayL {
  width: 96%;
  height: calc(100% - 60px);
  margin-left: 2%;
  .personalDiaplayLine{
  width: 100%;
  height:100%;
  overflow: auto;
  overflow-x: hidden;
  overflow-y: auto;
  li{
    width: 100%;
    height: 30%;
    margin-top: 1%;
    ul{
      width: 100%;
      height: 100%;
      li{
        width: 10%;
        height: 100%;
        border: 1px solid #97A8BE;
        margin-left: 1%;
        float: left;
        position: relative;
        top: -7.5%;
        overflow: hidden;
        img{
          position: relative;
        }
        span{
          width: 100%;
          height: 10%;
          text-align: center;
          line-height: -5%;
          overflow: hidden;
          display: inline-block;
          overflow:hidden;
          text-overflow:ellipsis;
          white-space:nowrap;
          position: absolute;
          top: 90%;
          left: 0;
          font-size: 15px;
        }
      }
    }
  }
  }
}

</style>

效果图