移动端vue实现部门结构功能_移动端固定头部和固定左边第一列的实现方案（Vue中实现demo） - 人人都是架构师...

最近移动端做一份报表，需要左右滚动时，固定左边部分；上下滚动时，固定头部部分。

代码在Vue中简单实现

主要思路是:

a.左边部分滚动，实时修改右边部分的滚动条高度

b.头部和内容部分都设置固定高度，当内容部分内容高度大于设置的高度时，产生滚动条

c.左右部分也设置固定宽度，左边设置固定宽度，右边设置成窗口的宽度减去左边部分的宽度，当右边部分的宽度大于设置的宽度时产生滚动条

扩展思路：

a.监控左右(x)滚动条滚动到右边边缘时，可以触发事件(如：加载下一批数据)

b.监控上下(y)滚动条滚动到下边边缘时，可以触发事件(如：加载下一页数据)

……

还可以定时器监控左右的滚动条高度是否一致，修改成一致(防止不同浏览器的兼容问题)

效果图如下：

代码如下：

我是左head

「{{i}}」左b

我是右head

「{{i}}」右「{{n}}」body

padding:0px;

}

name:"home",

data(){return{

headHeight:50,

bodyHeight: window.innerHeight- 50,

}

},

methods:{

}

}

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;

}