zoukankan      html  css  js  c++  java
  • 给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)`
          }
  • 相关阅读:
    mysq foreign外键记录
    查询时隐藏部分身份证号
    SpringBoot接收前端参数
    RabbbitMQ安装
    @configurationProperties注解时 idea弹出 Spring Boot Annotion processor not found in classpath
    rpm,yum和apt使用详解
    python人脸识别
    Fuchsia文章汇总
    Androi O Automotive 介绍
    Linux 版本控制工具之rabbitvcs
  • 原文地址:https://www.cnblogs.com/yangguoe/p/9458449.html
Copyright © 2011-2022 走看看