某次写官网时,侧面有个刻度尺导航,找了很久没找到,就只能用原生写一个,有些简陋,但是凑合能用,滚动条的距离没处理,有厉害的前辈可以帮忙看看。
就类似于这种功能
1,根据需求先布局写样式
<div class="kedus" >
<div :class="['kedu',index%5==0||index==0?'home':'',index==scrollindex?'active':'']" v-for="(i,index) in 31" :key="index" @click="goscroll(index)"></div>
</div>
2,在data中定义出要用到的参数
data() {
return {
scrollheight:0,//页面高度
itemscroll:0,//每个刻度的高度
scrollindex:0,//滚动刻度的数
kedu:[],//刻度尺的dom
}
},
3, 页面加载时获取页面高度并监听滚动事件
mounted(){
this.kedu=document.querySelectorAll('.kedu') //获取刻度列表
window.addEventListener("scroll", this.getscroll);//监听滚动事件
let scrollHeight =
document.documentElement.scrollHeight || document.body.scrollHeight;//获取页面高度
this.scrollheight=scrollHeight
this.itemscroll=this.scrollheight/30//每个刻度的高度
this.kedu[0].setAttribute('attr','true')//默认给第一个刻度加样式
},
4,滚动时刻度尺根据滚动条变化,点击刻度尺,页面也跟着变化
getscroll(){
let scrollTop =
document.documentElement.scrollTop ||
document.body.scrollTop;//获取当前滚动条高度
this.scrollindex= Math.ceil(scrollTop/this.scrollheight*30)<1?0:Math.ceil(scrollTop/this.scrollheight*30)>=26?30:Math.ceil(scrollTop/this.scrollheight*30)
//滚动是修改样式
for (let a = 0; a < this.kedu.length; a++) {
this.kedu[a].setAttribute('attr','false')
}
if(this.scrollindex==0||this.scrollindex%5==0){
this.kedu[this.scrollindex].setAttribute('attr','true')
}else{
this.kedu[this.scrollindex].setAttribute('attr','false')
}
},
//点击刻度尺时修改滚动条位置及样式
goscroll(i){
console.log(i)
document.documentElement.scrollTop = document.body.scrollTop =this.itemscroll*i
for (let a = 0; a < this.kedu.length; a++) {
this.kedu[a].setAttribute('attr','false')
}
if(i==0||i%5==0){
this.kedu[i].setAttribute('attr','true')
}else{
this.kedu[i].setAttribute('attr','false')
}
}
刻度尺的样式
.kedus{
position: fixed;
right: 0.2rem;
top: calc(50% - 1rem);
height: 2rem;
width: 0.24rem;
display: flex;
justify-content: space-between;
flex-direction: column;
align-items: flex-end;
.kedu{
width: 0.08rem;
height: 0.03rem;
background-color: #1ad8dc;
&:nth-of-type(1)::before{
content: "HOME";
font-size: 0.18rem;
position: absolute;
top: -0.1rem;
left: -0.6rem;
color:#1ad8dc;
display: none;
}
&[attr=true]:nth-of-type(1)::before{
display: block;
}
&:nth-of-type(6)::before{
content: "02";
font-size: 0.18rem;
position: absolute;
top: -0.1rem;
left: -0.25rem;
color:#1ad8dc;
display: none;
}
&[attr=true]:nth-of-type(6)::before{
display: block;
}
&:nth-of-type(11)::before{
content: "03";
font-size: 0.18rem;
position: absolute;
top: -0.1rem;
left: -0.25rem;
color: #1ad8dc;
display: none;
}
&[attr=true]:nth-of-type(11)::before{
display: block;
}
&:nth-of-type(16)::before{
content: "04";
font-size: 0.18rem;
position: absolute;
top: -0.1rem;
left: -0.25rem;
color:#1ad8dc;
display: none;
}
&[attr=true]:nth-of-type(16)::before{
display: block;
}
&:nth-of-type(21)::before{
content: "05";
font-size: 0.18rem;
position: absolute;
top: -0.1rem;
left: -0.25rem;
color: #1ad8dc;
display: none;
}
&[attr=true]:nth-of-type(21)::before{
display: block;
}
&:nth-of-type(26)::before{
content: "06";
font-size: 0.18rem;
position: absolute;
top: -0.1rem;
left: -0.25rem;
color:#1ad8dc;
display: none;
}
&[attr=true]:nth-of-type(26)::before{
display: block;
}
&:nth-of-type(31)::before{
content: "07";
font-size: 0.18rem;
position: absolute;
top: -0.1rem;
left: -0.25rem;
color: #1ad8dc;
display: none;
}
&[attr=true]:nth-of-type(31)::before{
display: block;
}
&.active{
height: 0.04rem;
width: 0.34rem;
}
}