uni-app中uni-popup组件中滚动条问题

2020-11-02  本文已影响0人  壹家全栈

在组件中,禁用了滚动事件。因此,我们把这个事件去掉就可以了。

打开组件代码,然后找到这段代码去掉就可以了。

但是之后就会导致另外一个问题的出现,我们假设这样一个场景:

1.在页面中,我们做了一个滚动分页的list,然后点击页面中的某个按钮,会弹出popup弹框,在弹框中我们需要滚动,在页面中我们同样需要滚动,那么就会出现,在弹出框上面滚动时,会同时出发页面上的滚动,从用户体验上来说,这肯定是不合理的。

解决方案一:

因此,我们在需要做这种弹框的时候,我们首先需要把mask层的滚动事件禁用,也就是在这个popup组件中,我们在mask层上去写 @touchmove.stop.prevent=""这个事件,但是这样还是不能解决在我们popup层上滚动时,会带动页面上滚动事件的问题,我最终的解决方案如下:

1.将popup弹窗的高度设置成height:100vh。

2.在我们的页面上的滚动到底的事件上去做一个判断,判断弹框是否打开,如果打开,则不触发触底事件中调用的分页函数。

解决方案二:

我们将不使用popup弹框,我们可以使用uni.showModel弹框去解决。

解决方案三:

我们把弹框做成一个单页面的形式,使用uni-app的缓存去存储你需要弹框中所带的值即可。

上一篇下一篇

猜你喜欢

热点阅读