公司因业务发展需要，选用跨平台开发，节约成本的同时也能提高效率，降低新业务由于频繁发版带来的用户流失。经考察，ionic文档方面比较全面也比较成熟一些，由于入手较晚直接从3起步，网上资料很少，很多东西都处于摸索阶段，讲的可能比较片面，轻拍！
闲话不多说，开始我们的正题吧！因为之前是做客户端的，对于这种效果，表示难度还是不大的，但是前端方面知识还是有所欠缺，第一时间想到的就是监听scroll的滚动，然后改变其他scroll的偏移量，达到所谓的同步。
效果展示
实现方式调整：
后经测试发现，再有大量数据的情况下，由于渲染成本的增加，导致延迟特别严重，故放弃下述的两种实现。
提供一个解决思路，通过嵌套ion-scroll的方式实现该效果。
父元素用一个只允许左右滑动的ion-scroll，在上面添加表头，下面用ion-scroll放置大量数据，设置只允许竖向滚动，这样就可以达到无延迟的浮动表头效果。
红色部分为普通的ion-grid,蓝色部分为ion-scroll
大概是这个样子
经过摸索，找到两种该方式的实现：（已弃用，可作为思路）
1、通过@ViewChild() 来获取到2个ion-scroll元素，实现addScrollEventListener()方法来实时监听滚动的情况。
首先我们在html中给两个scrollView分别加上id标记一下：
通过id标记该元素
通过id获取到该元素
@ViewChild('headerScroll') headerScroll: Scroll;
@ViewChild('contentScroll') contentScroll: Scroll;
获取到scroll元素后为其添加addScrollEventListener()
this.contentScroll.addScrollEventListener(function (event: any) {
that.headerScroll._scrollContent.nativeElement.scrollLeft = event.target.scrollLeft;
})
这时候我们打印event发现scrollLeft属性为当前左偏移量
target点进去
各个方向的偏移量都有记录
同样，that.headerScroll._scrollContent.nativeElement这个对象里面也有scrollLeft，将两者同步就达到联动效果~
2、通过获取标签的方式
通过document已经标签的id获取到对应的HTMLElement，由于ion-scroll的特殊性，我们需要获取到其scroll-content层才可以正常监听到滑动的Event。
this.hs = document.getElementById("headerScroll").getElementsByClassName("scroll-content")[0];
this.cs = document.getElementById("contentScroll").getElementsByClassName("scroll-content")[0];
拿到对应的Element之后只需要给其添加scroll监听，即可。
this.cs.addEventListener("scroll",function(ev: any) {
that.hs.scrollLeft = ev.target.scrollLeft;
});
这种方式需要注意的是，及时removeEventListener。
同时在处理单项联动的时候，如此解决没什么大碍，但是在双向联动的时候，就会出现scroll监听的互相调用，导致重绘页面时出现延迟。
为了解决这个问题，我通过获取用户的touchmove来判断当前用户所操作的区域，当用户在contentScroll部分滑动的时候，禁止headerScroll监听的调用，这样就保证了双向监听互相调用而导致的画面迟滞感。
如果有更好的方式，欢迎在下方留言分享！
网友评论