需求说明：
在Vue列表页面使用better-scroll滑动，并且，在子元素中创建弹层，弹层中也使用better-scroll。
问题说明：
1、弹层中滑动，父级也跟着滑动；
2、第一次打开弹层，子元素可以滑动，切换Tab之后滑动失效；
<template>
<div ref="wrapper"><!--列表滚动-->
<div ref="inWrapper">
<van-search v-model="key" @search="onSearch" label="关键字"/>
<van-dropdown-menu>
<van-dropdown-item @change="onChange" v-model="menu" :options="option"/>
</van-dropdown-menu>
<van-cell-group v-for="(item,i) in items" :key="i">
<van-cell @click="onCell(item[0])" :title="item[1].title" :value="item[1].value"/>
</van-cell-group>
</div>
<!--弹出框start-->
<van-action-sheet v-model="action" style="height: 80%">
<!--Tab切换-->
<template #description>
<van-tabs color="#3296fa" @click="onTabs">
<van-tab title="企业" name="1"></van-tab>
<van-tab title="个人" name="2"></van-tab>
</van-tabs>
</template>
<div ref="sheetWrapper"><!--弹层滚动-->
<div ref="inSheetWrapper">
<!--搜索框-->
<van-search v-model="sheetKey" @search="onSearch" label="关键字"/>
<!--用户列表-->
<van-cell-group ref="cell" v-for="(d,j) in list" :key="j">
<van-cell @click="onClick(d)" :border="true" is-link>
<template #title>
<span class="title-icon">用户</span>
<span class="title-text">{
{d.title}}</span>
</template>
</van-cell>
</van-cell-group>
</div>
</div>
</van-action-sheet>
<!--弹出框end-->
</div>
</template>
解决办法，请看注释：
export default {
name: 'reformList',
data() {
return {
cHeight: 0,
sHeight: 0,
scroll: null,
scroll2: null,
menu: null,
key: '',
items: [],
params: {
current: 1,
size: 20,
},
option: [
{
value: '', text: '全部'},
{
value: 1, text: '待整改'},
{
value: 2, text: '待复查'},
{
value: 3, text: '已复查'},
],
action: false,
sheetKey: '',
list: [],
}
},
watch: {
cHeight: {
<!--列表滚动-->
handler: function (height) {
if (height) {
this.$nextTick(() => {
this.$refs.inWrapper.style.minHeight = height + 'px';
this.scroll && this.scroll.refresh();
})
}
}
},
sHeight: {
handler: function (height) {
if (height) {
this.$nextTick(() => {
this.$refs.inSheetWrapper.style.minHeight = height + 55 + 'px';
this.scroll2 && this.scroll2.refresh();
})
}
}
},
action: {
handler: function (open) {
if (open) {
this.$nextTick(() => {
this.scroll2 = this.$BScroll2();
})
}
}
}
},
mounted() {
this.scroll = this.$BScroll();
this.$nextTick(() => {
this.refresh();
this.getUser();
});
},
methods: {
onSearch(key) {
console.log(key)
},
onChange(menu) {
console.log(menu)
},
onCell(item) {
console.log(item)
},
onTabs(num) {
if (num) {
this.getUser();
} else {
this.getUnit();
}
},
onClick(item) {
console.log(item)
},
$BScroll() {
let innerHeight = document.documentElement.clientHeight;
this.$refs.wrapper.style.height = innerHeight + 'px';
this.$refs.inWrapper.style.minHeight = '100vh';
return this.BScroll(this.$refs.wrapper);
},
$BScroll2() {
let sheetScroll = null;
if (!this.scroll2) {
this.$nextTick(() => {
sheetScroll = this.BScroll(this.$refs.sheetWrapper, {
stopPropagation: true,// 在弹层中滚动，避免影响父级滑动
bindToWrapper: true, // Tab切换之后，允许继续滑动
});
});
} else {
this.$nextTick(() => {
this.scroll2.refresh();
});
}
return sheetScroll;
},
refresh() {
this.$api.getReformQuery(this.params).then(res => {
const {
code, data} = res;
if (res && code === 200 && data && data.records && data.records.length) {
this.list = this.list.concat(data.records);
}
<!--列表滚动-->
this.$nextTick(() => {
this.cHeight = this.$refs.list.offsetHeight;
});
})
},
getUser() {
this.$api.getUser().then(res => {
if (res && res.code === 200 && res.data) {
this.list = res.data;
}
<!--弹出框-->
this.$nextTick(() => {
if (this.$refs.cell) {
this.sHeight = this.$refs.cell.offsetHeight;
}
});
});
},
getUnit() {
this.$api.getUnit().then(res => {
if (res && res.code === 200 && res.data) {
this.list = res.data;
}
<!--弹出框-->
this.$nextTick(() => {
if (this.$refs.cell) {
this.sHeight = this.$refs.cell.offsetHeight;
}
});
});
},
}
}