解决MintUI使用Popup出现滑动穿透的问题

问题描述：

列表页.png

       在使用 Vue+mintui 做移动端的会页面开发时，列表使用的是 vue-infinite-scroll 做无限滚动，当进入列表页后，点击全部按钮后弹出模态框，当组员列表不可滑动时，在组员列表上滑动会导致模态框下的列表跟着一起滑动，而组员列表可以滑动时，则不会导致底下的列表滑动。并且在组员筛选所在div上滑动也会出现相同状况。

需求

       进入列表页，列表页可以正常滑动，当弹出模态框后，底下的列表页就不能再滑动，而组员列表可能需要滑动。

解决办法：

        在查阅很多资料后，发现解决的办法无非两种，一种是动态给列表元素添加overflow-y : hidden；另外一种是使用e.preventDefault(）动态添加给列表元素。但是这两种都不能满足需求。
       因为是使用的vue-infinite-scroll，所以用overflow：hidden;无法禁止滚动，所以只能动态判断，当有模态框时，使用e.preventDefault(）禁止列表的滚动，切不影响组员列表的滚动。

步骤：

第一步： 安装 better-scroll

   npm install better-scroll --save

第二步：引入

import BScroll from 'better-scroll'

第三步：添加监听事件

watch.png

对应的HTML结构

html