微信小程序（6）——禁止页面滚动

太过爱你忘了你带给我的痛 2022-05-18 02:50 2985阅读 0赞

▍写在前面（来访者请直接浏览下一条）

最近在做一个美食类小程序的时候，需要用到一个购物车，自己不好构思，就仿照美团的购物车写了一个，然后就在这卡了一下：购物车列表是fixed脱离文本流的，在上下滚动购物车列表的时候，底部的页面竟然也会跟着滚动，这怎么成，所以我就找了一下关于这个问题的解决方案。

▍效果预览

首先小声说一句，为了节约时间，所以在做数据模拟显示的时候，所有的图片还有名称、销量都用了同一个，只是改了一下相应的价格用以区分。

![70][]

▍实现方法

**【注意】本文只记录【禁止页面滑动】的方法，不涉及关于购物车的设计方法。**

1、首先设计出一个底部页面；

![70 1][]

2、制作出一个覆盖在上层的模块（当然，最初制作的时候，底部滚动条有时候会跟着购物车的滚动条一起滚动）；

![70 2][]

3、【方法核心】：改变容器的height属性：auto↔100%。

【实际操作】：

3.1：给底部页面设置动态class属性或者id属性用以改变其css样式，这里我使用isHiddenShoppingList这个变量来控制是否要赋予底部页面（container）container-ban这个属性；

![70 3][]

3.2：设置container-ban这个class属性的样式：

.container-ban{
      height: 100%;
      overflow: hidden;
    }

一般来说这样就可以实现功能了，但是有时候还是会有特例（仅上述代码无法实现功能），比如我的这个页面就是，即使使用了上面的代码还是无法达到最终预期效果。因为我的这个container-ban它的外部没有我自己编写的view容器，所以它的父级元素是page，而我对page的高度是没有限制的，所以container-ban的height: 100%;并没有起到实际的作用。

3.3：固定底部页面的父级元素的高度为100%；

page{
      height: 100%;
    }
    
    .container-ban{
      height: 100%;
      overflow: hidden;
    }

最后实现了最终效果。到这里，整个流程就结束了。

▍后续。。。

当我再次用到这个方法时，发现确实实现了禁止页面滚动的效果，但是，同时也带来了副作用：如果底部页面比较长，在固定底部页面时，底部页面会自动跳到页面的最顶端（我本来在页面中间点了一个按钮，想要弹出一个框框，结果点完之后，底部页面直接滚到了最顶端，然后我就不知道我点了列表中的哪一项的按钮，尴尬。。。）而这一切都是overflow: hidden;做的怪。

既然有缺陷，就要找一个更好的方法，要让底部页面不会滚到最顶端，找了半天终于有了收获。终于有了方法：将底部页面用scroll-view包裹，固定的时候就底部页面就不会自动滚动到最顶端了。

方案如下：

page {
      height: 100%;
      overflow-y: hidden;
    }
    
    /* scroll-view容器 */
    .container {
      height: 100%;
    }

<scroll-view class='container' scroll-y='{
       {isHideDialog}}'>
        ……
    </scroll-view>

▍再后续。。。

前面的功能实现之后，我又发现了一个新问题，因为我原本正常的下拉刷新，现在不能下拉了，因为scroll-view覆盖了全局，我在往下滑的时候，页面会以为我只是在scroll-view里下滑，不能感觉到我是想下拉刷新。

▍参考文档

[解决微信小程序自定义弹窗滚动与页面滚动冲突][Link 1]、[scroll-view组件实现下拉刷新, 拉到底加载更多][scroll-view_]

![关注公众号：爱唱歌的蜗牛先生][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfZG9udF9rbm93X2E_size_16_color_FFFFFF_t_70]

[70]: /images/20220518/9de220204b9b433aa074a380a598c1e5.png
[70 1]: /images/20220518/9b84f65e46cd4fbea4e6cc0fac79bb5e.png
[70 2]: /images/20220518/1055014a3f3e436f812623db51a558f1.png
[70 3]: /images/20220518/915cf063d7164bd5a62cb4f253d7af61.png
[Link 1]: https://www.jianshu.com/p/6022f7346ed2
[scroll-view_]: https://blog.csdn.net/ishowman/article/details/79536163
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfZG9udF9rbm93X2E_size_16_color_FFFFFF_t_70]: /images/20220518/ff1b6fcbee774f30b610f6778492e635.png