我正在尝试创建垂直滚动动画。
我在div中有9个元素,其中隐藏了溢出和高度,您当时只能看到3个。
每隔5秒钟我只想把它们加上负号
margin-top
和更改
orderStep
变量所以,如果orderStep等于1,那么当它为1时,我向所有元素添加边距0
margin-top: -190px;
当它是2时,我加上-380px。
我有一个函数在
methods
对象,然后我执行它
created
从后端获取记录后。
不幸的是,它不起作用,我的代码是:
data() {
return {
articles: [],
errors: [],
step: 1
}
},
methods: {
changeSlide() {
const elements = document.querySelectorAll('.most__popular');
setInterval(() => {
switch (this.step) {
case 1:
for(let val of elements) {
val.style.margin = "10px 0";
}
this.step = 2;
break;
case 2:
for(let val of elements) {
val.style.margin = "-190px 0 0 0";
}
this.step = 3;
break;
case 3:
for(let val of elements) {
val.style.margin = "-380px 0 0 0";
}
this.step = 1;
break;
}
},5000);
}
},
async created() {
try {
const response = await axios.get(`/api/article/getMostPopular.php`, axiosConfig);
this.articles = response.data.records;
this.changeSlide();
} catch (e) {
this.errors.push(e)
}
},
它根本不会改变我元素的风格。在firefox控制台中,我没有任何错误。
步骤变量的初始值为1,如中所示
data()
(我在编辑中添加了它)。
编辑
我做了更多的调试,我发现
document.querySelectorAll
没有给我正确的节点列表,它是空的。这可能是因为我指的是使用
v-for
来自异步后端调用(
response
从…起
created()
)但我想我可以在我的
axios.get
,如何修复?
编辑2
现在,正如RoyJ在注释部分建议的那样(可能是因为我不应该在vue使用其虚拟DOM时操纵DOM),我正在绑定样式
:style
模板中的指令
<div class="most__popular"
v-for="n in articles" :key="n.id"
:style="{margin: sliderMargin}">
因此,我将margin设置为sliderMargin变量,该变量在函数中发生变化:
changeSlide() {
setInterval(() => {
switch (this.step) {
case 1:
console.log('step1');
this.sliderMargin = '10px 0 0 0';
this.step = 2;
break;
case 2:
console.log('step2');
this.sliderMargin = '-190px 0 0 0';
this.step = 3;
break;
case 3:
console.log('step3');
this.sliderMargin = '-190px 0 0 0';
this.step = 1;
break;
}
},5000);
}
但它并没有像我所希望的那样工作,因为它为每个元素添加了边距,所以结果它并没有滚动,而是消失了。所以我要做的是:
-
在第一步中,所有元素都有边距顶部:10px
-
在第二步中,1、2、3个元素的页边距为顶部:-190px,其余元素的页边距为10px
-
在第三步中,1、2、3、4、5、6个元素具有边距顶部:-190px其余元素具有10px
问题是如何调整
:样式
仅适用于前三种情况,如果
this.step
等于2或6,如果
这步
等于3或无,如果
这步
等于1?