收藏
回答

添加弹出层时,如何固定背景页面不可滚动

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 需求 scroll-view 客户端 6.7.3 1.6.6

在某一个页面中,页面中的内容有很多,需要向上滑动才可以展示底部的数据,现在的问题是,滑动页面的内容后,点击界面中的某一项内容,弹出一个弹出层,而弹出层中的内容也是超出了屏幕大小的(弹出层中采用的是<scroll-view>标签实现的),此时滑动弹出层时,需要固定背景页面不可以滚动,但是,经过一番测试,发现以下问题:

1)方法一:弹出弹出层时动态添加class样式:

.classname{

height:100%;

overflow:hidden;

position:fixed;

}

发现的问题是:背景页面是固定了不可滚动,但是,页面回到了原来的位置(回到了顶部的位置),我想要的是背景页面的内容是弹出层弹出瞬间的背景的内容(说白了就是在当前的位置弹出弹出层,而不是背景界面回到顶部弹出弹出层),故方法达不到效果

2)方法二:在弹出层的<scroll-view>中添加 catchtouchmove="true" 属性,但是发现,在滚动弹出层时,弹出层的内容滚动到底部时(弹出层内容滚动完毕了),此时,背景页面还是可以滚动到最低端位置此后,再次上下滚动弹出层时,背景才会不可滚动,但是,此时的背景界面以滚动到底部(不是弹出层弹出瞬间的位置),故此方法也不能到达效果。。。。。


到此,已经试了几个方法依旧不能达到预期的效果,求大神帮忙,感激不尽。。。。。。。


回答关注问题邀请回答
收藏

2 个回答

  • Smile、冷
    Smile、冷
    2018-11-01

    试了一下,这个方法是可以的,感谢感谢。。。。。。。

    设置scroll-top滚动条位置是可以的,只不过不能把滚动监听的scrollTop值直接赋值给scroll-top,而是要用一个中间变量存储,等弹出弹出层的时候再赋值给scroll-top属性。。。。

    。。。。。感谢你的思路。。。。

    2018-11-01
    有用
    回复 1
    • 黄豆芽🔫
      黄豆芽🔫
      2018-11-01

      没事,希望官方能更新一些更好用的组件。

      2018-11-01
      回复
  • 黄豆芽🔫
    黄豆芽🔫
    2018-11-01

    在弹出层开启的时候记录页面当前滚动位置。


    按方法1加那个class。


    在弹出层关闭的时候,将滚动条滚回记录的那个滚动位置。


    这种应该可以实现,但是感觉太麻烦了,而且弹出层如果没有尽可能盖住底部的页面的话,那用户还是有感知的。

    2018-11-01
    有用
    回复
登录 后发表内容