ionic1 滑动表格

1 相关html

 <div>
        <div class="biaotou" style="display: flex">
          <div class="heads">
            <span>姓名</span> 
          </div>
          <div class="heads"><span>年龄</span></div>
          <div style="overflow: hidden;white-space: nowrap;width:{{wi}};">
            <ion-scroll direction="x" scrollbar-x="false" overflow-scroll="false" has-bouncing="false" delegate-handle="headHandle" on-scroll="noScroll()">
              <div  style="display: flex;width: {{w}};">
                <div ng-repeat="t in tou" class="heads"><span>{{t}}</span></div>
                </div>
            </ion-scroll>
          </div>
        </div>
        <div class="maintou" style="display: flex">
           <div >
             <ion-scroll direction="y" scrollbar-y="false" overflow-scroll="false" has-bouncing="false" style="height:{{h}}px;" delegate-handle="leftHandler" on-scroll="noScroll()">
               <div style="width: 124px;display: flex;" ng-repeat="me in message" ng-class="{'ow':{{$index}}%2==0}">
                  <div class="heads">{{me.name}}</div>
                  <div class="heads">{{me.className}}</div>
                </div>
             </ion-scroll>
            
           </div>
           <div style="overflow: hidden;white-space: nowrap;width:{{wi}};">
            <ion-scroll direction="xy"  style="height:{{h}}px;" scrollbar-x="false" scrollbar-y="false" overflow-scroll="false" has-bouncing="false" delegate-handle="rightHandler" on-scroll="scroll()">
              <div style="width: {{w}};">
                <div ng-repeat="me in message"  style="display: flex;" ng-class="{'ow':{{$index}}%2==0}">
                  <span class="heads">{{me.class1}}</span>
                  <span class="heads">{{me.class2}}</span>
                  <span class="heads">{{me.class3}}</span>
                  <span class="heads">{{me.class4}}</span>
                  <span class="heads">{{me.class5}}</span>
                  <span class="heads">{{me.class6}}</span>
                  <span class="heads">{{me.class7}}</span>
                </div>   
              </div>
            </ion-scroll>   
          </div>
        </div>
      </div>

2 相关js

.controller('AccountCtrl', function($scope,$ionicScrollDelegate) {
  $scope.message = [
    {
      name:'张三',
      className:'留一半',
      class1:'23',
      class2:'23',
      class3:'23',
      class4:'23',
      class5:'23',
      class6:'23',
      class7:'23',
    },
    {
      name:'张三1',
      className:'留一半',
      class1:'23',
      class2:'23',
      class3:'23',
      class4:'23',
      class5:'23',
      class6:'23',
      class7:'23',
    },{
      name:'张三2',
      className:'留一半',
      class1:'23',
      class2:'23',
      class3:'23',
      class4:'23',
      class5:'23',
      class6:'23',
      class7:'23',
    },{
      name:'张三3',
      className:'留一半',
      class1:'23',
      class2:'23',
      class3:'23',
      class4:'23',
      class5:'23',
      class6:'23',
      class7:'23',
    },{
      name:'张三4',
      className:'留一半',
      class1:'23',
      class2:'23',
      class3:'23',
      class4:'23',
      class5:'23',
      class6:'23',
      class7:'23',
    },
    {
      name:'张三',
      className:'留一半',
      class1:'23',
      class2:'23',
      class3:'23',
      class4:'23',
      class5:'23',
      class6:'23',
      class7:'23',
    },
    {
      name:'张三1',
      className:'留一半',
      class1:'23',
      class2:'23',
      class3:'23',
      class4:'23',
      class5:'23',
      class6:'23',
      class7:'23',
    },{
      name:'张三2',
      className:'留一半',
      class1:'23',
      class2:'23',
      class3:'23',
      class4:'23',
      class5:'23',
      class6:'23',
      class7:'23',
    },{
      name:'张三3',
      className:'留一半',
      class1:'23',
      class2:'23',
      class3:'23',
      class4:'23',
      class5:'23',
      class6:'23',
      class7:'23',
    },{
      name:'张三4',
      className:'留一半',
      class1:'23',
      class2:'23',
      class3:'23',
      class4:'23',
      class5:'23',
      class6:'23',
      class7:'23',
    },{
      name:'张三',
      className:'留一半',
      class1:'23',
      class2:'23',
      class3:'23',
      class4:'23',
      class5:'23',
      class6:'23',
      class7:'23',
    },
    {
      name:'张三1',
      className:'留一半',
      class1:'23',
      class2:'23',
      class3:'23',
      class4:'23',
      class5:'23',
      class6:'23',
      class7:'23',
    },{
      name:'张三2',
      className:'留一半',
      class1:'23',
      class2:'23',
      class3:'23',
      class4:'23',
      class5:'23',
      class6:'23',
      class7:'23',
    },{
      name:'张三3',
      className:'留一半',
      class1:'23',
      class2:'23',
      class3:'23',
      class4:'23',
      class5:'23',
      class6:'23',
      class7:'23',
    },{
      name:'张三4',
      className:'留一半',
      class1:'23',
      class2:'23',
      class3:'23',
      class4:'23',
      class5:'23',
      class6:'23',
      class7:'23',
    }
  ]
  
   $scope.tou = ['a1','a2','a3','a4','a5','a6','a7'] 
   //数据横轴可能是不定项所以定义宽度
   $scope.w = $scope.tou.length*60+'px'
   //获得固定项之后剩余得手机屏幕宽度    
   $scope.wi = screen.width-124+'px'
   console.log($scope.wi)
//定义内容得高度 
 $scope.h=Math.min(document.documentElement.clientHeight,window.innerHeight)-44-50-50;
   $scope.noScroll = function(){
     var headHand = $ionicScrollDelegate.$getByHandle('headHandle')
     var leftHand = $ionicScrollDelegate.$getByHandle('leftHandler')
     headHand.freezeScroll(true)   
     //设置不能滑动
     leftHand.freezeScroll(true)
   }
$scope.scroll = function(){
  var rightHand = $ionicScrollDelegate.$getByHandle('rightHandler')
  var headHand = $ionicScrollDelegate.$getByHandle('headHandle')
  var leftHand = $ionicScrollDelegate.$getByHandle('leftHandler')
  //scrollTo(left, top, [shouldAnimate])   left 水平滚动得值
  top: 垂直滚动得值  [shouldAnimate]：是否显示滚动动画
  headHand.scrollTo(rightHand.getScrollPosition().left,0,false)
  leftHand.scrollTo(0,rightHand.getScrollPosition().top,false)
 // getScrollPosition()
//		返回:  对象 滚动到该视图的位置，具有一下属性：
//		{数值} left 从左侧到用户已滚动的距离(开始为 0)。
//		{数值} top 从顶部到用户已滚动的距离 (开始为 0)。
		}
	//$getByHandle：一个代表性实例就是只控制带有delegate-handle的滚动视图来匹配给定的句柄。
});

相关技术点：

<ion-scroll     direction="x" 滑动方向
 scrollbar-x="false"   是否显示水平滚动条
 overflow-scroll="false" 
 has-bouncing="false"
 delegate-handle="headHandle"   指定滚动视图
 on-scroll="noScroll()"   用户滚动时触发函数
   >
</ion-scroll>