js吸顶效果与布局

Posted 2023-03-24

参考技术A 项目中常用的吸顶效果，如果页面没有固定定位的元素是比较容易实现的，但是如果页面结构比较复杂会有兼容性问题

常见兼容性问题：吸顶元素无法固定，会随着页面滚动抖动

解决方案：页面整体为弹性布局，中间加载部分自适应高度，总体结构为 顶部固定+内容+底部固定

注意整体弹性布局的时候如果要实现吸顶效果，必须将定位元素放到flex=1元素的外层，吸顶的元素需要用两个div，一个是正常显示的，一个是滚动到一定高度固定到顶部的

html:

<div class="wrap" id="wrapId">

    <div class="isFixed" v-if="is_fixed">

        <div class="topBar" id="fixedTopFixed" ref="topBar">

            <div class="item" v-for="(item,index) in barList" >吸顶内容</div>

        </div>

    </div>

    <div class="flexWrap" :class="is_fixed? 'wrapTop' : 'flex'">

            <div class="myScroll" v-infinite-scroll="loadMore" infinite-scroll-throttle-delay="500" infinite-scroll-immediate-check="true" infinite-scroll-disabled="busy" infinite-scroll-distance="50">

            <div class="flexContent">

                <div class="top" ref="top">

                    <div class="banner"><img src="../../../assets/images/文件名/banner.jpg" alt="" srcset=""></div>

                    <div class="topBar" id="fixedTop" ref="topBar" v-show="!is_fixed">

                        <div class="item" v-for="(item,index) in barList" @click="tab(index,item)">

                        不吸顶时展示的内容

                        </div>

                    </div>

                </div>

                <div class="scrollContent" id="wrap-content" ref="contentH">

                    <div class="memberList" v-show="infoList.length>0" id="content">

                        <div class="myScroll" v-infinite-scroll="loadMore" infinite-scroll-throttle-delay="500" infinite-scroll-immediate-check="true" infinite-scroll-disabled="busy" infinite-scroll-distance="10">

                            <div class="memberItem" v-for="(item,index) in infoList">

                                加载内容

                            </div>

                            <div class="loading" v-if="loading">

                                <span id="load-text">loadText</span>

                            </div>

                        </div>

                    </div>

                    <div class="empty" v-show="noData">最新达成情况正在更新中...请稍后再来～</div>

                </div>

            </div>

        </div>

    </div>

    <div class="footer">底部固定</div>

</div>

js:

data:

    return

        busy: false,

        pageNum: 1,

        pageSize: 10,

        loading: false，

        noData: false,

        infoList: []

   



mounted()

<!--监听滚动-->

    that.$nextTick(() =>

        let scrollDOM = document.querySelector('.flexContent')

        scrollDOM.addEventListener('scroll',that.handleScroll)

    )

,

methods:

    handleScroll ()

        let scrollDOM = document.querySelector('.flexContent')

        let scrollTop = scrollDOM.scrollTop;

        <!--计算滚动高度-->

        let clientHeight = document.documentElement.clientHeight

        if (scrollTop > document.querySelector('.banner').offsetHeight)

            this.is_fixed = true;

        else

            this.is_fixed = false;

       

    ,

    <!--//触发加载-->

    loadMore()

        if(this.pageNum<this.pages)

            this.loading = true

            this.pageNum+=1

            this.busy = true

            this.loadData(接口参数,this.pageNum)

       

    ,

    //加载时触发的接口调用

    loadData()

        api.XXX(,function(success,data,err)

            if(success)

                if(data.status==200)

                //加载逻辑判断

                    if(data.body.list.length>0 && pageNum>0)

                        that.infoList = that.infoList.concat(data.body.list)

                        that.loading = false

                   

                    if(pageNum==data.body.pages || data.body.list<20)

                        that.loading = true

                        that.loadText = '没有更多数据了'

                   

                    if(pageNum==1 && data.body.list.length==0)

                        that.noData = true

                        that.infoList = []

                   

               

           

        )

   



css:

.isFixed

    width: 100%;

    height: 1rem;

    position: absolute;

    top: 0;

    left: 0;

    z-index: 100;



.myScroll

    height: 100%;



.wrap

    width: 7.5rem;

    margin: auto;

    height: 100%;

    overflow: hidden;

    display: flex;

    flex-direction: column;



.flex

    flex: 1;



.wrapTop 

            padding-top:0.45rem;

 

.flexWrap

    width: 100%;

    height: 100%;



.flexContent

    width: 100%;

    height: 100%;

    display: flex;

    flex-direction: column;

    overflow: scroll;

    -webkit-overflow-scrolling: touch;



.top

    .banner

        position: relative;

        img

            width: 100%;

            display: block;

       

        .month

            position: absolute;

            bottom: 0.33rem;

            left: 0.45rem;

            color: #fff;

            font-size: 0.45rem;

       

   



.scrollContent

    width: 100%;

    background: #fff;

    flex: 1;

    -webkit-overflow-scrolling: touch;

    .memberList

        height: 100%;

        padding-top: 0.2rem;

   



.footer

    position: fixed;

    bottom: 0;

    width:7.5rem;

    margin: auto;

    height:auto;

    background:rgba(0,0,0,.7);