<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>