给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)`
      }

 

posted @ 2018-08-11 08:14  前端极客  阅读(170)  评论(0编辑  收藏  举报