uniapp 自定义弹层时，底部页面滚动而弹层不能滚动

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/iVRJay/article/details/85324811

今天做页面有个需求：

页面有个列表（A），内容过多时需要滚动，

然后做了个弹层，里面也有个列表（B），内容过多时需要滚动

由于A列表使用的web-view组件，而B列表使用view组件加overflow:hidden auto;

结果是：当弹层显示时，B列表不能滚动，底部列表A却能滚动；

于是在度娘上找了找：

1、发现@touchmove.prevent貌似好牛逼，赶紧加上去，结果AB都GG了；

[code]@touchmove.prevent

2、当显示弹层时，给body添加样式

[code]body{
position:fixed;
top:0;
height:100%;
overflow:hidden;
}

ctrl+s ------------------------>>>当场GG，body样式一沉不变

正当我一筹莫展的时候，突然灵机一动，把B列表也改成了scroll-view组件

[code]<scroll-view class="B" scroll-y>
······
</scroll-view>

ctrl+s ------------------------>>>当场--------->>>非常OK

A列表正常滚动，弹层出现后，弹层里面内容可以滚动了，且底部A列表已经不可以滚动了，当弹层消失，A列表有可以正常滚动；

到这里，我的问题已经解决了，原谅我本来两个scroll-view组件就能搞定的事却折腾了这么久，不过谁让咱是程序猿呢，就是得抗造不是？

那么问题来了，难道view就不能做了吗？

一想到这里，我又感紧去试了下

结果是： AB两个都是view组件加overflow:auto;是可以的，不过当弹层B列表滚动到顶部或者底部时，继续滚动会带动A列表滚动，体验不是很好；当然这个可以自己折腾优化下，但我这人懒，既然有现成的方案就直接用了。

而view和scroll-view的组合，你自己去用用就知道了。