8.解决Taro里面滚动穿透的问题

最近的项目在用Taro重构代码，
接到个令人头秃的交互，通过拖拽栏目来改变排序顺序。
好在小程序和Taro框架，
已经封装了MovableArea和MovableView这俩标签，能降低点难度。
不过还是需要通过计算来定位位置，让我这个学酥瑟瑟发抖。

结果实现到最后的时候，遇到了个大坑，
就是滚动穿透的问题。
效果就是，当这边拖拽着栏目的时候，结果页面也跟着一起滚动。
也是醉了。

首先，想到的就是事件拦截，
比如阻止事件冒泡，结果拦截也木有用，
或者用原生小程序catchtouchmove来绑定事件，
结果直接语法报错，一脸懵逼。

其次，就百度谷歌，
网上也有一些解决方法，
不过在我这里唯一生效的方法，就是靠样式生生阻止了滚动，
虽然感觉这个方法有些奇葩，
但是目前也就先采用这个方案了。

最后，就是禁用iOS系统特有的屏幕滚动特效。
不禁用采取默认值的话，
iOS机型的屏幕依旧滚动的很魔性。

在最外层的View增加样式，
通过是否处于点击状态变量标识，来改变样式。

1
2
3

<View className={`${isTouch ? 'scroll-lock': 'scroll-unlock'}`}>
  ...
</View>

.scroll-lock {
  height: 100vh; 
  overflow: hidden;
}
.scroll-unlock {
  height: 100vh; 
  overflow-y: scroll;
}

禁用iOS系统特有的屏幕滚动特效。
页面级新建文件 ./index.config.ts

1
2
3

export default {
  disableScroll: true,
}

话说Taro论坛也没有相关的介绍，
感觉这个问题应该是比较常见啊。
不知道是不是我找错位置了。

而且，另外有种感觉就是React系框架写东西很吃力，
也是自己不太熟悉的原因吧。

如果让我比喻的话（狗头保命勿喷），
Vue系的框架，像是一盘快餐，像是自动挡的车，
可以快速的满足需求，很多都是傻瓜式操作，
框架默认帮助自己做了很多东西，
这样缺点就是会导致代码可优化空间也会很有限，
当项目做大会觉得后继无力。

React系的框架，像是一顿正餐，像是手动挡的车，
煎炸烹煮都可以开发者自由的选择，
自由度高，可操作性比较复杂，
正因为如此，
导致项目差异会很大，想充分驾驭React就需要更多的知识储备，
高手和菜鸟写出来的东西完全是两种效果。

前端就是一个这样的生态环境吧，
框架迭代频繁，
逆水行舟，不进则退。
每天只有不断地学习，才能不会被后浪拍在沙滩上吧。