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

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

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

▍效果预览

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

▍实现方法

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

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

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

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

【实际操作】：

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

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;
}

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