vue手写列表竖向滚动

看看效果图

 

最近由于项目需求，需要做一个列表的无线循环滚动，由于我们项目没有用UI库，所以手写了一个列表滚动，不过虽然网上很多，但还是想记录下来，话不多说了，上代码!

样式层

<template>
  <div class="scrolList" ref="box" :style="scrolStyle">
    <div class="top" v-if="showMask"></div> // 这里是加了一个遮罩过度
    <div class="bottom" v-if="showMask"></div>
    <div class="ul anim" ref="ul" :style="ulStyle">
      <template v-for="(item,index) in list">
        <p class="li" ref="li" :key="index">
          <span class="item1">{{ item.name }}</span>
          <span class="item2">{{ item.phone }}</span>
          <span class="item3">{{ item.desc }}</span>
        </p>
      </template>
    </div>
  </div>
</template>

js层

export default {
  props:{
    list: {
      type: Array,
      require: true
    },
    scrolStyle: Object, //可配置容器样式
    showMask: Boolean
  },
  data() {
    return {
      config:{
        height: null
      },
      step: 0,
      liIndex: 0
    }
  },
  mounted() {
    this.initInfo()
    setInterval(() => {
      this.$nextTick(()=>{
        this.scrol()
      })
      this.liIndex++
    }, 500);
  },
  computed: {
    ulStyle() {
      return `height: ${this.config.height}px`
    }
  },
  methods: {
    /**
     * 初始化高度
     */
    initInfo() {
      this.config.height = this.$refs.li[0].clientHeight * this.list.length;
    },
    /**
     * 每次20px滚动
     */
    scrol() {
      this.step += 20
      //循环数据
      this.list.push(this.list[this.liIndex])
      this.$refs.ul.style.transform = `translateY(-${this.step}px)`
    }
  }
}

之前是写在页面里，但想了想还是封装成了组件，便于以后再用

样式层

<style lang="scss">
  .scrolList{
    position: relative;
    overflow: hidden;
    .top{
      position: absolute;
      z-index: 66;
      top: 0;
      height: 0.8rem;
      width: 100%;
      background-image: linear-gradient(to top,rgba(0,0,0,0) 0%,red 50%);;
    }
    .bottom{
      position: absolute;
      bottom: 0;
      height: 0.8rem;
      width: 100%;
      z-index: 66;
      background-image: linear-gradient(to bottom,rgba(0,0,0,0) 0%,red 50%);;
    }
    .ul{
      margin-top: 0.6rem;
      .li{
        display: flex;
        transform: translate(0);
        height: 0.8rem;
        font-size: 0.4rem;
        text-align: left;
        line-height: 0.8rem;
        .item1 {
          flex: 1;
        }
        .item2{
          flex: 3;
        }
        .item3{
          flex: 3;
        }
      }
    }
  }
  .anim {
    transition: all 0.5s linear;
  }
</style>

其实实现的思路有很多，利用margin，position等都可以实现，我利用的是tsranslate，谢谢阅读