template就不说了,正常的steps就可以;记住给steps设一个v-model,来切换当前的状态;
我这里v-model的名字是stepStatus
js:
mounted(){
//计算子div高度
var childDiv = ["BasicInfo","BeginTest","GetData"]; //step列表,和每个要切到的div界面是一样的
var parent = document.getElementById("content");
for(var i = 0;i<childDiv.length;i++){
var child = document.getElementById(childDiv[i]);
childHeight.push(child.offsetTop - parent.offsetTop); //把每个div距离父元素的高度存在数组里
}
parent.addEventListener('scroll', this.handleScroll); //监听滚动的事件
},
methods: {
handleScroll(){
var scroll = document.getElementById("content").scrollTop; //获取到滚动的高度
for(var i = 0;i < childHeight.length; i++){ //遍历step列表,页面滚动时,比较滚动的高度在哪两个元素之间
if(childHeight[i] < scroll && childHeight[i+1] > scroll){
this.stepStatus = i; //这就是steps的v-model,直接赋值就可以改变啦。
}
}
}
},