VUE上下轮播实现

 

<template>
<div>
  <div
    :style="{ height: height * lineNum + 'px' }"
    class="rollScreen_container"
    id="rollScreen_container"
  >
    <ul
      class="rollScreen_list"
      :style="{ transform: transform }"
      :class="{ rollScreen_list_unanim: num === 0 }"
    >
      <li class="rollScreen_once" v-for="(item,index) in contentArr" :key='index' :style="{height:height+'px',lineHeight:height+'px'}">
        <img :src="item" class="img"></img>
      </li>
      <slot name="slide"></slot>
      <!-- <li
        class="rollScreen_once"
        v-for="(item, index) in contentArr"
        :key="index + contentArr.length"
        :style="{ height: height + 'px' }"
      >
        <span>{{ item }}</span>
      </li> -->
    </ul>
  </div>
      <p @click="clickBtn">点击关闭轮播</p>

  </div>
</template>
 
<script>
export default {
  props: {
    // height: {
    //   default: 40,
    //   type: Number,
    //   required: true
    // }, // 每行元素的高度
    // lineNum: {
    //   default: 5,
    //   type: Number
    // }, // 显示行数
    // contentArr: {
    //   default: [
    //     'https://img01.yzcdn.cn/vant/apple-1.jpg',
    //     'https://img01.yzcdn.cn/vant/apple-2.jpg',
    //     'https://img01.yzcdn.cn/vant/apple-1.jpg',
    //     'https://img01.yzcdn.cn/vant/apple-2.jpg',
    //     'https://img01.yzcdn.cn/vant/apple-1.jpg',
    //   ],
    //   type: Array
    // }, // 简单文本轮播
    // dLength: {
    //   default: null,
    //   type: Number
    // }, // 自定义插槽内容的时候必须传自定义内容的长度
    // time: {
    //   default: 3000,
    //   type: Number // 定义轮播切换速度
    // }
  },
  data: function () {
    return {
      time: 1000,
      height: 100,
      lineNum: 3,
      contentArr: [
        'https://img01.yzcdn.cn/vant/apple-1.jpg',
        'https://img01.yzcdn.cn/vant/apple-2.jpg',
        'https://img01.yzcdn.cn/vant/apple-3.jpg',
        'https://img01.yzcdn.cn/vant/apple-4.jpg',
        'https://img01.yzcdn.cn/vant/apple-5.jpg',
        'https://img01.yzcdn.cn/vant/apple-6.jpg',

      ],
      num: 0,
      loopTime: 1000,
      interval: null
    }
  },
  computed: {
    transform: function () {
      console.log(this.num)
      return 'translateY(-' + this.num * this.height + 'px)'
    },
  },
  watch: {

  },
  methods: {
    clickBtn () {
      console.log('点击关闭轮播')
      this.interval && clearInterval(this.interval);//停止
    }
  },
  mounted: function () {

    let _this = this
    if (this.contentArr != null && this.contentArr.length < this.lineNum) {
      console.error('轮播显示行数不能超过数据总行数')
    } else {
      // 先判断轮播切换速度，如果小于动画播放时间则提示切换速度过快
      // if (_this.loopTime <= 1000) {
      //   console.warn('轮播切换速度过快，至少大于1s')
      //   _this.loopTime = 1000
      // }
      if (_this.contentArr !== null) {
        console.log('hhh ')
        var arr2 = _this.contentArr.shift()
        var b = [..._this.contentArr]
        _this.contentArr = b.concat(arr2)
        console.log(_this.contentArr, '_this.contentArr')
        this.interval = setInterval(function () {
          _this.num++
        }, _this.loopTime)

      }
    }
  },
  beforeDestroy () {
    this.interval && clearInterval(this.interval);//停止
  },
}
</script>
 
<style>
.rollScreen_once {
  /* margin-top: 20px; */
  /* background: red; */
}
.rollScreen_container {
  display: inline-block;
  position: relative;
  overflow: hidden;
}
.rollScreen_list {
  transition: 1s linear;
}
.rollScreen_list_unanim {
  transition: none;
}
.img {
  width: 100px;
  height: 100px;
}
</style>