ionic实现表格头部和第一列固定且都可滚动

转载请注明出处：
http://blog.csdn.net/lishihong108/article/details/52712064

由于移动端屏幕有限，在展示多行多列的表格类型数据时，需要做成可滚动的来展示，但是滚动的时候，我们需要表头和第一列固定，以便在滚动的时候，可以看到该行、该列所属。如图所示：
　　
　　
　　在横向滚动的时候，第一列[地区]保持不动，方便用户查看所属地区；纵向滚动时候，表头保持不动。
　　具体实现，先将这个布局划分为4部分，如下：
　　

第一个部分就是个简单的单元格，绿色部分是一个横向滚动区域，蓝色部分是一个纵向滚动区域，紫色部分是即可纵向又可横向滚动的区域。接下来就是用ionic自带的组件ion-scroll来实现4部分布局，然后再根据滑动的方向判断。当横向滑动紫色部分x距离，则绿色部分跟着滑动x距离；当纵向滑动紫色部分y距离，则蓝色部分跟着滑动y距离。接下来看代码具体实现，在布局上有一点要注意的是，要保持这个表格的协调，每个单元格要固定宽高度。

单元格css样式代码:

<style type="text/css">.head{border-bottom:solid 1px #D1D3D6;border-right:solid 1px #D1D3D6;height:50px;display:flex;align-items:center;width:125px;font-size:14px;color:#262626;justify-content:center;}
</style>

页面代码:

<ion-view view-title="表格首行首列固定">  <ion-content overflow-scroll="false"><div style="display:flex;width:625px;"><div class="head">地区</div><div style="overflow: hidden;white-space: nowrap;width:250px;"> <ion-scroll direction="x" scrollbar-x="false" overflow-scroll="false" has-bouncing="false" delegate-handle="headContainerHandle" on-scroll="noScroll()" style="margin-top:0;"><div style="display:flex;width:500px;"><div class="head">到件量</div><div class="head">出仓量</div><div class="head">滞留量</div><div class="head" style="border-right:0;">未派送量</div> </div></ion-scroll> </div></div><div style="display:flex;width:625px;"><ion-scroll direction="y" scrollbar-y="false" overflow-scroll="false" has-bouncing="false" delegate-handle="leftContainerHandle" on-scroll="noScroll()" style="height:{{h}}px;"><div ng-repeat="d in data" class="head">{{d.zoneName}}</div> </ion-scroll><div style="overflow: hidden;white-space: nowrap;width:250px;"> <ion-scroll direction="xy" scrollbar-x="false" scrollbar-y="false" overflow-scroll="false" has-bouncing="false" on-scroll="scrollRightHorizon()" delegate-handle="rightContainerHandle" style="height:{{h}}px;"><div style="width:500px;"> <div ng-repeat="d in data" style="display:flex;"><div class="head">{{d.arriveTickets}}</div> <div class="head">{{d.moniOutCnt}}</div><div class="head">{{d.moniStayCnt}}</div><div class="head" style="border-right:0;">{{d.moniUndeliveryCnt}}</div></div></div></ion-scroll> </div></div> </ion-content>
</ion-view>

controller里面的代码:

$scope.data=[{'zoneName':'广州区','arriveTickets':'6987','moniOutCnt':'2221','moniStayCnt':'45','moniUndeliveryCnt':'44'},{'zoneName':'深圳区','arriveTickets':'2356','moniOutCnt':'331','moniStayCnt':'45','moniUndeliveryCnt':'44'},{'zoneName':'武汉区','arriveTickets':'6744','moniOutCnt':'2621','moniStayCnt':'45','moniUndeliveryCnt':'44'},{'zoneName':'苏州区','arriveTickets':'6542','moniOutCnt':'2881','moniStayCnt':'45','moniUndeliveryCnt':'44'},{'zoneName':'杭州区','arriveTickets':'2367','moniOutCnt':'5621','moniStayCnt':'45','moniUndeliveryCnt':'44'},{'zoneName':'东莞区','arriveTickets':'1129','moniOutCnt':'1221','moniStayCnt':'45','moniUndeliveryCnt':'44'},{'zoneName':'惠州区','arriveTickets':'7893','moniOutCnt':'4521','moniStayCnt':'45','moniUndeliveryCnt':'44'},{'zoneName':'汕头区','arriveTickets':'2356','moniOutCnt':'7821','moniStayCnt':'45','moniUndeliveryCnt':'44'},{'zoneName':'清远区','arriveTickets':'67554','moniOutCnt':'9921','moniStayCnt':'45','moniUndeliveryCnt':'44'},{'zoneName':'长沙区','arriveTickets':'5534','moniOutCnt':'2221','moniStayCnt':'45','moniUndeliveryCnt':'44'},{'zoneName':'岳阳区','arriveTickets':'6643','moniOutCnt':'2221','moniStayCnt':'45','moniUndeliveryCnt':'44'},{'zoneName':'株洲区','arriveTickets':'6546','moniOutCnt':'2221','moniStayCnt':'45','moniUndeliveryCnt':'44'},{'zoneName':'南充区','arriveTickets':'4353','moniOutCnt':'2221','moniStayCnt':'45','moniUndeliveryCnt':'44'}, {'zoneName':'鞍山区','arriveTickets':'4526','moniOutCnt':'2221','moniStayCnt':'45','moniUndeliveryCnt':'44'}];$scope.h=Math.min(document.documentElement.clientHeight,window.innerHeight)-44-50;$scope.scrollRightHorizon=function(){var rightHandle = $ionicScrollDelegate.$getByHandle("rightContainerHandle");var headHandle = $ionicScrollDelegate.$getByHandle("headContainerHandle");var leftHandle = $ionicScrollDelegate.$getByHandle("leftContainerHandle");headHandle.scrollTo(rightHandle.getScrollPosition().left,0,false);leftHandle.scrollTo(0,rightHandle.getScrollPosition().top,false);}; $scope.noScroll=function(){var headHandle = $ionicScrollDelegate.$getByHandle("headContainerHandle");headHandle.freezeScroll(true);var leftHandle = $ionicScrollDelegate.$getByHandle("leftContainerHandle");leftHandle.freezeScroll(true);};

controller里面，scope.data是数据，scope.data是数据，scope.data是数据，scope.h是通过屏幕的高度-减去标题栏的高度44-表头的高度50，然后把这个高度设置给纵向滚动的ion-scroll的高度。on-scroll事件是ion-scroll组件滚动的时候触发的，当紫色部分横向滚动时候，调整绿色部分滚动组件的横向滚动；当紫色部分纵向滚动时候，调整蓝色部分的滚动组件的纵向滚动；之所以绿色部分和蓝色部分滚动组件的滚动是为了防止滚动时候不断的相互触发滚动，引起冲突，也造成了该方案的一个缺点，就是必须手在紫色部分才可以操作滑动。

ionic实现表格头部和第一列固定且都可滚动相关推荐

纯css position:sticky 实现表格首行和首列固定
目录 1.认识position:sticky 2.position:sticky小栗子-实现表格首行和首列固定 2.1 效果图 2.2 代码 1.认识position:sticky 我们先来了解一个c ...
DGV中复选框第一列可编辑 ,第一列固定显示
只读属性ReadOnly publicvoid EditCheak() { for (int i = 0; i <dgvRYLB.Columns.Coun ...
element 表格多级表头子列固定
element 中 table 固定列使用fixed 属性:但是多级表头时只能固定第一列: 设置对应子列表头的宽度和父系表头的宽度可以使对应的列固定: 不需要固定的列则不需要设置宽度,同时父级表头的宽 ...
python对excel两列相乘_Python w/Excel表格。对于第一列中的每个值，计算两列。
我有一个excel表格,例如在A列中有100行,值每五行改变一次,所以前5行的值为1,第二行的值为2,..直到最后5行的值为20.我想通过Col A值,用Col C计算Col B.在ColA中,我将有 ...
vue移动端表格，超出横向滚动，固定第一列
效果图 html结构表格数据对应渲染功能实现思路:其实看代码就能了解了,就很简单的用循环数组,然后把数组中的每一项对应放在一个位置就行了.这样循环几个,就有几列数据,后台传过来的数据就分成两个,一个 ...
BootStrap自适应Table表格固定左边第一列
有个页面引用了BootStrap前端框架,这个页面是一个table,要放在手机上浏览.这个table的左侧第一列是要固定的.所谓第一列固定,就是在横向滚动的时候第一列一直显示在最左侧.网上查了下方法, ...
vue实现变态表格表头和列固定
复杂表格表头和列固定对于这个问题,相信网上也会有很多答案,很多插件或者是类似的案例,一下是我参考别人所写的案例自己改造的一个变态表格 1.实现的效果是,左右滚动,左边列固定,上下滚动,上边头部固定 ...
element-ui 表格第一列随滚动自动吸顶
最近项目需求:表格中的第一列在滚动的时候,要随着页面的滚动儿滚动.纠结了半天,解决了.记录下来,看能否给碰到类似问题的朋友,提供一些思路. 效果图 ![在这里插入图片描述](https://img-b ...
element table 合计第一行固定列
element table 合计第一行在这位大哥这里学来的, 但同时我这边的情况是: 固定高度, 第一列固定, 参数多, 因此, 这个方法不能够完全满足, 因此加入以下代码: 代码作用: 在每次获 ...

ionic实现表格头部和第一列固定且都可滚动

ionic实现表格头部和第一列固定且都可滚动相关推荐

最新文章

热门文章