小程序开发过程中踩过的坑

「这是我参与11月更文挑战的第1天，活动详情查看：2021最后一次更文挑战」

小程序吸顶效果1px缝隙问题

在微信小程序中通过使用sticky属性以达到吸顶效果的目的position: sticky; top: 0;，测试时发现，在部分机型下会出现和顶部内容相差1px空隙的问题
寻找了许久之后，想到了一种解决方案box-shadow: 0 -1px #fff,通过给导航条添加1px的阴影的方式来掩盖这条缝隙。
但是终究不是一个好的解决方案，后来发现官方文档里面有一个sticky组件，可以通过组件来替代css属性sticky，并且在官方社区中可以发现，官方并不是非常推荐使用sticky属性，因为毕竟兼容性并不是很好，使用官方的组件支持性更高

<mp-sticky offset-top="32">
  <button size="mini" type="primary" style="margin-left: 115px; background-color: #1989fa">吸顶距离</button>
</mp-sticky>

小程序事件穿透问题

在开发的过程中，我们往往会需要写一些弹窗组件，这个时候会需要遮罩层来蒙住下面的内容，而在这个蒙层上面会经常出现事件穿透，我们在滑动蒙层上的内容时也会滑动蒙层下面的内容。
所以我们在写一些弹窗等需要蒙层的内容时需要添加一个catchtouchmove属性来阻止事件的穿透，以避免在滑动上面的内容时连带滑动了蒙层下面的内容。
而在小程序中一直有个规则，那就是原生组件的层级是最高的，有时候我们需要在弹窗中加上输入框，textarea等原生组件，又因为设计需要，给textarea添加了最大高度，期望能在多行时通过滑动内容区来查看内容。
而这个时候在真机上会发现一个问题，textarea的内容无法滑动，在排查了许久发现是因为有catchtouchmove阻止滑动事件穿透，而原生组件的层级原因导致无法接收到滑动事件，而如果删除catchtouchmove又会导致事件穿透到下面的内容。
在思考了许久之后，最终选择将内容部分和蒙层分开，给蒙层添加catchtouchmove。这样输入框可以滑动，而其他地方又不会滑动。但是还是会有一个问题，在滑动输入框的时候，持续滑动操作会连带滑动蒙层下面的内容，想了许久，通过动态添加catchtouchmove属性的方式，在蒙层打开时，给蒙层下的内容添加上catchtouchmove，以达到可以滑动弹窗内的输入框，又不会带着蒙层下面的内容一并滑动。