移動端固定頭部和固定左邊第一列的實現方案（Vue中實現demo）

標籤：console   定時器   image   range   inf   高度   固定高度   是否一致   clear   

最近移動端做一份報表，需要左右滾動時，固定左邊部分；上下滾動時，固定頭部部分。

代碼在Vue中簡單實現

主要思路是:

a.左邊部分滾動，即時修改右邊部分的捲軸高度

b.頭部和內容部分都設定固定高度，當內容部分內容高度大於設定的高度時，產生捲軸

c.左右部分也設定固定寬度，左邊設定固定寬度，右邊設定成視窗的寬度減去左邊部分的寬度，當右邊部分的寬度大於設定的寬度時產生捲軸

擴充思路：

a.監控左右（x）捲軸滾動到右邊邊緣時，可以觸發事件(如：載入下一批資料)

b.監控上下（y）捲軸滾動到下邊邊緣時，可以觸發事件(如：載入下一頁資料)

……

還可以定時器監控左右的捲軸高度是否一致，修改成一致（防止不同瀏覽器的相容問題）

 

如下：

 

代碼如下：

<template>    <div class="outermost-layer">        <div class="left">            <div class="left-head" :style="{height: `${headHeight}px`}">                我是左head            </div>            <div  :style="{height: `${bodyHeight}px`}" class="left-body"  id="leftBodyId" onscroll="rightBodyId.scrollTop = this.scrollTop;console.log(rightBodyId.scrollTop);console.log(this.scrollTop)">                <div v-for="i in 40" style="height: 20px">                    「{{i}}」左b                </div>            </div>        </div>        <div class="right">            <div class="right-head" :style="{height: `${headHeight}px`}">                我是右head            </div>            <div  :style="{height: `${bodyHeight}px`}" class="right-body" id="rightBodyId" onscroll="leftBodyId.scrollTop = this.scrollTop;console.log(leftBodyId.scrollTop);console.log(this.scrollTop)">                <div v-for="i in 40" style="height: 20px">                    <span v-for="n in 5">「{{i}}」右「{{n}}」body</span>                </div>            </div>        </div>    </div></template><!--這裡可以防止滾動到頂部時，整體往上位移，底部出現空白--><style>    #vux_view_box_body{        padding:0px;    }</style><script>    export default {        name: "home",        data(){            return {                headHeight: 50,                bodyHeight: window.innerHeight - 50,            }        },        methods:{        }    }</script><style scoped>    .outermost-layer {        background-color: white;        padding: 0px;    }    .left{        width: 100px;        height: 100%;        background-color: orange;        float: left;        display: inline-block;    }    .left-head{        width: 100%;        /*height: 30px;*/        clear: both;    }    .left-body{        background-color: olive;        clear: both;        /*height: 617px;*/        /*左邊設定捲軸，系統監聽左邊的捲軸位置，保持高度一致*/        overflow-y: scroll;    }    .right{        width: calc(100% - 100px);        height: 100%;        float: left;        overflow-x: scroll;        display: inline-block;    }    .right-head{        background-color: greenyellow;        /*height: 30px;*/        z-index: 10;        clear: both;    }    .right-body{        width: 1400px;        /*height: 617px;*/        clear: both;        overflow: auto;    }</style>

 

移動端固定頭部和固定左邊第一列的實現方案（Vue中實現demo）