可以能是我自己的坑,为了避免出现我这个反面教材还是说下问题吧:选项卡中使用scroll组件。如果使用v-show只有默认激活的选项卡内容可以滚动,其他都不行;如果使用v-if则都可以滚动
<template>
<div class="scroll-query-wrap">
<!-- tab item 区域 -->
<div class="tab-wrap">
<div class="tab-item" @click="onTabItem(0)" :class="{'tab-item-active': activeTabIndex == 0}">Con1</div>
<div class="tab-item" @click="onTabItem(1)" :class="{'tab-item-active': activeTabIndex == 1}">Con2</div>
<div class="tab-item" @click="onTabItem(2)" :class="{'tab-item-active': activeTabIndex == 2}">Con3</div>
</div>
<!-- tab content -->
<div class="tab-con-wrap">
<div class="con-main con1-wrap" v-if="activeTabIndex == 0">
<cube-scroll
ref="scrollCon1"
:data="list1"
:pull-up-load="true"
@pulling-up="onPullingUp(0)">
<ul class="con-list">
<li class="item"
v-for="(item, index) in list1"
:key="index">{{item}}</li>
</ul>
</cube-scroll>
</div>
<div class="con-main con2-wrap" v-if="activeTabIndex == 1">
<cube-scroll
ref="scrollCon2"
:data="list2"
:pull-up-load="true"
@pulling-up="onPullingUp(1)">
<ul class="con-list">
<li class="item"
v-for="(item, index) in list2"
:key="index">{{item}}</li>
</ul>
</cube-scroll>
</div>
<div class="con-main con3-wrap" v-if="activeTabIndex == 2">
<cube-scroll
ref="scrollCon3"
:data="list3"
:pull-up-load="true"
@pulling-up="onPullingUp(2)">
<ul class="con-list">
<li class="item"
v-for="(item, index) in list3"
:key="index">{{item}}</li>
</ul>
</cube-scroll>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'scrollQuery',
data () {
return {
activeTabIndex: 0,
list1: [1, 2, 3, 4, 5, 6],
list2: [1, 2, 3, 4, 5, 6, 7, 8],
list3: [1, 2, 3, 4, 5, 6, 8, 9]
}
},
methods: {
onTabItem (type) {
this.activeTabIndex = type
},
onPullingUp (type) {
setTimeout(() => {
if (Math.random() > 0.5) {
let itemIndex = 0
// 如果有新数据
let newPage = [
'I am line ' + type + ', ' + ++itemIndex,
'I am line ' + type + ', ' + ++itemIndex,
'I am line ' + type + ', ' + ++itemIndex,
'I am line ' + type + ', ' + ++itemIndex,
'I am line ' + type + ', ' + ++itemIndex
]
if (type === 0) this.list1 = this.list1.concat(newPage)
if (type === 1) this.list2 = this.list2.concat(newPage)
if (type === 2) this.list3 = this.list3.concat(newPage)
} else {
// 如果没有新数据
if (type === 0) this.$refs.scrollCon1.forceUpdate()
if (type === 1) this.$refs.scrollCon2.forceUpdate()
if (type === 2) this.$refs.scrollCon3.forceUpdate()
}
}, 1000)
}
}
}
</script>
<style scoped>
.tab-wrap{
display:flex;
align-items: center;
justify-content: center;
height: 35px;
width:100%;
background-color:#333;
}
.tab-item {
padding:0 10px;
margin-right:10px;
color:#fff;
}
.tab-item-active{
color:red;
}
/* con */
.tab-con-wrap{
position: relative;
height: 500px;
width:100%;
}
.con-main {
position: absolute;
left: 0;
top:0;
width:100%;
height:100%;
overflow:hidden;
}
.con-main .item {
height: 100px;
line-height: 100px;
text-align: center;
background-color:green;
color:#fff;
margin-bottom:30px;
}
.con-main .item:last-child {
margin-bottom:0;
}
</style>