效果图:
1、支持鼠标滚轮滚动事件
2、其他暂不支持
3、支持事件调用,可根据当前展现的数据进行任务调度,比如在滚动到北京市的时候,在下方列表显示北京的所有区县
实现思路:
1、写三个文本标签,一个上次展现,一个正在展现、一个即将展现
<template>
<div class="index">
<div class="scroll">
<ul :style="{top}">
<li class="lastDataStyle"> {{ lastData }}</li>
<li class="nowDataStyle"> {{ nowData }}</li>
<li class="nextDataStyle"> {{ nextData }}</li>
</ul>
</div>
</div>
</template>
2、定时文本替换
goScroll() {
clearInterval(this.p);
this.p = setInterval(() => {
this.setData(this.scrollIndex);
},5000);
},
3、处理下标
全部代码:
<template>
<div class="index">
<div class="scroll">
<ul :style="{top}">
<li class="lastDataStyle"> {{ lastData }}</li>
<li class="nowDataStyle"> {{ nowData }}</li>
<li class="nextDataStyle"> {{ nextData }}</li>
</ul>
</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return {
scrollList: [
"11111111", "22222222222", "3333333333", "4444444444444"
],
top: "",
scrollIndex: 0,
p: "",
lastData: "",
nowData: "",
nextData: ""
}
},
mounted() {
this.goScroll()
//监听鼠标滚动事件
window.addEventListener('mousewheel', this.mouseWheelScroll);
},
methods: {
goScroll() {
clearInterval(this.p);
this.setData(this.scrollIndex);
this.continueScroll();
// this.p = setInterval(() => {
this.setData(this.scrollIndex);
this.continueScroll();
// }, 5000);
},
//给文字滚动赋值
setData(_index) {
var lastIndex = _index == 0 ? this.scrollList.length - 1 : _index - 1;
this.lastData = this.scrollList[lastIndex];
this.nowData = this.scrollList[_index];
var nextIndex = _index == this.scrollList.length - 1 ? 0 : _index + 1;
this.nextData = this.scrollList[nextIndex];
},
//滚动下标处理 每次加一
continueScroll() {
var _index = this.scrollIndex;
var nextIndex = _index < this.scrollList.length - 1 ? _index + 1 : 0;
this.scrollIndex = nextIndex;
},
//鼠标滑动事件
mouseWheelScroll(e) {
var deltaY = e.deltaY;
console.log("deltaY = " + deltaY)
if (deltaY < 0) { //向下滚动 deltaY = -250
var _index = this.scrollIndex;
var nextIndex = _index == 0 ? _index - 1 : this.scrollList.length - 1;
nextIndex = nextIndex < 0 ? this.scrollList.length - 1 + nextIndex : nextIndex ;
this.scrollIndex = nextIndex;
}
console.log("mouseWheelScroll index = " + this.scrollIndex)
clearInterval(this.p);
this.setData(this.scrollIndex);
this.continueScroll();
}
},
destroyed() {
clearInterval(this.p);
}
}
</script>
<style lang="scss" scoped>
img {
width: 30px;
height: 30px;
border-radius: 50%;
vertical-align: middle;
margin-right: 20px
}
ul {
position: relative;
color: #ff4d51;
}
li {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 80%;
height: 60px;
line-height: 60px;
text-align: left;
margin: 0;
font-size: 14px
}
.scroll {
height: 180px;
overflow: hidden;
font-size: 0px;
position: relative;
text-align-last: center;
width: 300px;
margin: 0 auto;
}
.transition {
transition: top 0.5s
}
.lastDataStyle {
color: dimgrey;
transform: rotateX(45deg);
}
.nowDataStyle {
color: #0000FE;
font-weight: bold;
font-size: 20px;
}
.nextDataStyle {
color: dimgrey;
transform: rotateX(-45deg);
}
</style>