给singer的左侧添加fixedTitle,并显示向上滚动偏移效果;
1.将写好的dom绝对定位到顶部;
2.dom值为singerlist的currentIndex.title(通过计算属性获取),如果有则显示fixedTitle,没有则隐藏;
3.计算diff:当diff小于30,大于0的时候滚动,滚动的距离就是diff-顶部高度即TITLE_HEIGHT;
4.diff就等于this.diff = height2 + newY;上线减去滚动的距离,得到的也就是上线到顶部的高度;
5.监听diff的变化,在满足条件时候fixedTitle发生偏移
代码如下:
<!--fixedTitle--> <div class="list-fixed" ref="fixed" v-show="fixedTitle"> <div class="fixed-title">{{fixedTitle}}</div> </div> for(let i=0 ; i<listHeight.length -1; i++){//循环看落在哪一个区间 let height1 = listHeight[i] let height2 = listHeight[i+1] if(!height2 || (-newY >= height1 && -newY <height2)){ this.currentIndex =i // fixedTitle代码 this.diff = height2 + newY;//上线与滚动的值,因为newY是负值,相当于减去:然后监视diff的变化 return } } diff(newVal){//监听diff let fixedTop = (newVal>0 && newVal < TITLE_HEIGHT) ? newVal -TITLE_HEIGHT :0 if(this.fixedTop === fixedTop){ return } this.fixedTop = fixedTop this.$refs.fixed.style.transform = `translate3d(0,${fixedTop}px,0)` }
一辈子很短,努力的做好两件事就好;第一件事是热爱生活,好好的去爱身边的人;第二件事是努力学习,在工作中取得不一样的成绩,实现自己的价值,而不是仅仅为了赚钱;