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

 

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

最近在做一个美食类小程序的时候，需要用到一个购物车，自己不好构思，就仿照美团的购物车写了一个，然后就在这卡了一下：购物车列表是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;
}

 

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

 

 

▍后续。。。

当我再次用到这个方法时，发现确实实现了禁止页面滚动的效果，但是，同时也带来了副作用：如果底部页面比较长，在固定底部页面时，底部页面会自动跳到页面的最顶端（我本来在页面中间点了一个按钮，想要弹出一个框框，结果点完之后，底部页面直接滚到了最顶端，然后我就不知道我点了列表中的哪一项的按钮，尴尬。。。）而这一切都是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里下滑，不能感觉到我是想下拉刷新。

 

▍参考文档

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