jsm-mall-h5-front/src/components/carousel.vue

<template>
	<view class="carousel_view" :style="{ height: layHeight + 'px' }">
		<view class="carousel_rongqi" :style="{ top:top+'px' }">
      <slot :data="showList" />
    </view>
	</view>
</template>

<script>
	export default {
		props:{
      // item的class类
      itemClass:{
        type: String,
        default: "item"
      },
      // 定时器执行时间
      itemTime:{
        type: Number,
        default: 10
      },
      // 每次定时器执行时位移数
      diffv:{
        type: Number,
        default: 1
      },
      // 列表数据
      list:{
        type: Array,
        default: ()=>[]
      },
      // 显示数据
      showNum:{
        type: Number,
        default: 5
      },
      // 停顿时间
      standstill:{
        type: Number,
        default: 0
      },
		},
		data() {
			return {
        layHeight: 0,
        itemHeight: 0,
				index: 0,
        top: 0
			};
		},
    computed:{
      actualShowNum(){
        return this.showNum + 1
      },
      showList(){
        var ayuan = []
        while (ayuan.length == 0 || ayuan.length%this.showNum) {
          ayuan.push(...this.list)
        }
        var list = ayuan.slice(this.index, this.actualShowNum)
        var len = this.actualShowNum - list.length
        if(len > 0){
          return [...list, ...ayuan.slice(0, len)]
        }else{
          return [...list]
        }
      }
		},
    mounted(){
      this.lunbo()
    },
    methods:{
      init(){
        if(this.timeId) {
          clearTimeout(this.timeId)
        }
        if(this.index == this.list.length - 1){
          this.index = 0
        }else{
          this.index ++
        }
        this.$nextTick(()=>{
          this.top = 0
          var layHeight = 0
          var elements = document.querySelectorAll(`.carousel_rongqi .${this.itemClass}`);
          elements.forEach((element,index) => {
            if(index == 0){
              this.itemHeight = element.clientHeight
            }
            if(index < elements.length - 1){
              layHeight += element.clientHeight
            }
          });
          this.layHeight = layHeight
          this.timeId = setTimeout(this.lunbo, (this.standstill + this.itemTime))
        })
      },
      lunbo(){
        if(this.timeId) {
          clearTimeout(this.timeId)
        }
        var chazhi = parseInt(Math.abs(this.top + this.itemHeight))
        if(chazhi==0){
          this.timeId = setTimeout(this.init, this.itemTime)
        }else if(chazhi < this.diffv){
          this.top = this.itemHeight * -1
          this.timeId = setTimeout(this.lunbo, this.itemTime)
        }else{
          this.top -= this.diffv
          this.timeId = setTimeout(this.lunbo, this.itemTime)
        }
      },
    }
	}
</script>

<style scoped lang="scss">
.carousel_view{
  width: 100%;
  position: relative;
  overflow: hidden;
}
.carousel_rongqi{
  width: 100%;
  height: auto;
  position: absolute;
  left: 0;
  right: 0;
}
</style>