uni-app踩坑记录

多个scroll-view绑定

在做项目过程中遇到一个问题，需要做一个类似table的表格，但是uni-app好像没有table的组件，所以还是只能从scroll-view上做文章

功能描述

1、内容区可以上下和左右滑动
2、table head 需要和table body需要同步实现左右滑动
3、body上下滑动时，head不能被顶上去

解决方法

如果把head和body放在同一个scroll-view中，可以完美实现左右滑动的同步（好像是废话），但是上下滑动的话，head就会被顶上去，就导致不能快速确定内容所对应的标题名称，尤其是数据量很大时，会大大降低使用体验。
所以，我就想到了使用两个scroll-view组件，一个做head,只能左右滑动，一个做body，可以上下左右滑动。如此的话，需要让两个scroll-view实现左右滑动的绑定。scroll-view有一个属性scroll-left,它的作用是设置横向滚动条位置。只需要绑定![](https://img-blog.csdnimg.cn/20190924142422293.png)
只需要绑定这两个scroll-view的scroll-left属性，就能够实现左右滑动的同步（伪同步）。
但是这种方法有点瑕疵，这也是我为什么认为这是伪同步。比如滑动head时，由于把head的scroll-left传递给body的scroll-left需要时间，就导致body的滑动慢那么一拍，反过来也是这样。

双向绑定的bug

scroll-left的值是通过@scroll事件获取的。刚开始两个scroll-view都添加了@scroll时间，目的是为了实现不论是滑动head还是body，都能实现同步，当数据量只有一二十条时，问题还没出来，当时当数据量逐渐变大，问题就暴露了，尤其是在真机上调试时。数据量越大，抖动的频率越高，时间越长。
出现上述状况的原因是两个scroll-view都添加了@scroll事件，当其中一个滑动，带动另一个滑动，都响应了@scroll,于是两个scroll-left互传，你给我一个值，我给你一个值，产生了逻辑bug。
解决办法就是取消一个@scroll事件，我是取消了head的@scroll，这样滑动body时，head的scroll-left不会反向传给body。缺点是滑动head，不能带着body一起滑动。不过滑动body时，不管head错位有多大，最后都能对齐，也算是达到了想要的效果。

其他

项目中我使用的是scroll-left，目的是为了实现左右滑动的绑定，同理，如果想要实现上下滑动的绑定，可以使用scroll-top。