美文网首页
uni-app中uni-popup组件中滚动条问题

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

作者: 壹家全栈 | 来源:发表于2020-11-02 15:56 被阅读0次

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

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

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

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

    解决方案一:

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

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

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

    解决方案二:

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

    解决方案三:

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

    相关文章

      网友评论

          本文标题:uni-app中uni-popup组件中滚动条问题

          本文链接:https://www.haomeiwen.com/subject/cgemvktx.html