vant-ui 下拉刷新组件和滚动冲突

问题描述:

在使用vant-ui的下拉刷新和滚动加载组件时, 上下滑动屏幕时, 发现向下滑动总是触发下拉刷新( ios没有问题 )

解决过程:

搜索了相关问题, 有的是在滚动内容上加@touchmove.stop 属性, 有的是改写<van-pull-refresh>组件样式. 尝试之后问题未解决.

于是重新整理了一遍样式,统一用flex布局, 然后将<van-pull-refresh>组件单独放在一个固定高度的容器内,并且给父容器添加overflow:hidden属性;再在<van-pull-refresh>中添加固定高度,和overflow属性.

......
<div style=" flex:1; overflow: hidden;">
    <van-pull-refresh style="height:100%;overflow:auto;" >
        <van-list style="height: 100%;" >
        </van-list>
    </van-pull-refresh>
</div>
.....