看看效果图
最近由于项目需求,需要做一个列表的无线循环滚动,由于我们项目没有用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,谢谢阅读