遇到问题
在action-sheet弹出层组件内,内容多的时候,上下滑动无法滚动??
代码1:
<van-action-sheet v-model="showActionSheet"
round
title="弹出"
>
<child />
</van-action-sheet>
子组件:
<template>
<div class="wrap">
<div class="content1">
content
</div>
<div class="content2">
content2
</div>
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
.wrap{
overflow:scroll;
}
.content1,.content2{
min-height:200px;
}
.content1{
overflow:scroll;
}
</style>
问题原因:
vant 弹窗源码:
addLock: function addLock() {
if (this.lockScroll) {
(0, _event.on)(document, 'touchstart', this.touchStart);
(0, _event.on)(document, 'touchmove', this.onTouchMove);
if (!_context.context.lockCount) {
document.body.classList.add('van-overflow-hidden');
}
_context.context.lockCount++;
}
},
onTouchMove: function onTouchMove(event) {
this.touchMove(event);
var direction = this.deltaY > 0 ? '10' : '01';
var el = (0, _scroll.getScroller)(event.target, this.$el);
var scrollHeight = el.scrollHeight,
offsetHeight = el.offsetHeight,
scrollTop = el.scrollTop;
var status = '11';
/* istanbul ignore next */
if (scrollTop === 0) {
status = offsetHeight >= scrollHeight ? '00' : '01';
} else if (scrollTop + offsetHeight >= scrollHeight) {
status = '10';
}
/* istanbul ignore next */
if (status !== '11' && this.direction === 'vertical' && !(parseInt(status, 2) & parseInt(direction, 2))) {
(0, _event.preventDefault)(event, true);
}
},
解决方法:
.content1 是无意中加了overflow:scroll, 去掉 overflow:scroll就好了