微信小程序：小程序常见问题及解决方案-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序：小程序常见问题及解决方案。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

原生组件显示在遮罩层上面的问题

在小程序中使用原生的表单组件时，在有弹出框出现的情况下，原生表单组件会出现在遮罩层上面，且会造成事件穿透的情况。

解决方案一：

使用cover-view，cover-view比原生组件的层级更高，或者说也是一种原生组件，不过在cover-view的子组件只能是coveri-view、cover-image，对于包含其他组件的弹框并不适用。

解决方案二：

使用page-container，page-container会弹出一个容器，可以承载任意组件。page-container原本是用来实现子页面的，不过用于实现弹框也是可以的。

由于是原本是用来显示子页面的所以在点击返回时可能会出现需要点击两次才会回退到上一个页面的情况，因此，需要自己手动回退一次。

至于事件穿透问题，在遮罩层上使用catch绑定tap、touchmove等事件阻止事件冒泡即可。

scroll-view高度适配问题

布局情况：
scroll-view的上面和下面的高度是固定的，scroll-view与下面部分之间有间隔，要在不同的机型下显示相同的间隔

js解决
使用windowHeight，减去固定部分的高度，剩余的高度为scroll-view的高度。固定部分的高度使用样式中的大小乘以不同机型的rpx的比率得到响应的px大小。
css
scroll-view的父元素设置为flex，absolute定位，设置top、bottom、left、right让父元素占据页面的剩余空间。底部元素也包含进scroll-view的父元素，设置固定高度和间隔。
设置scroll-viewflex：1，让scroll-view占据父元素中的剩余空间。

表单控件聚焦后页面上推问题

现象：页面上滑导致自定义导航上滑
原因：1. 导航本身就没有加载完毕或者设置样式的时间在显示之后
2. 页面本身的上滑，带动了自定义导航的上滑
解决方法：1. 提前设置样式的时间，或者在多处设置样式2. 禁止页面上滑，使用wx.pageScrolTo({top:0})，在页面的配置文件中设置disableScroll：true。
3. 自定义实现页面上推逻辑，监听表单控件的聚焦事件，聚焦时更改元素的布局属性。