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的缓存去存储你需要弹框中所带的值即可。