问题:页面触底加载之后,回到头部,顶部数据被遮挡
将<swiper class="swiper-list"></swiper>
上的swiper-list样式高度调整成90vh
javascript
<view class="main">
<u-sticky bgColor="#fff">
<u-tabs ref="uTabs" :list="tabList" lineWidth="26" lineHeight="11" :lineColor="`url(${lineBg}) 100% 100%`"
:activeStyle="{
color: '#303133',
fontWeight: 'bold',
transform: 'scale(1.05)'
}"
:inactiveStyle="{
color: '#606266',
transform: 'scale(1)'
}"
itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;margin-bottom: 6px" @change="tabsChange" @click="tabsChange" :current='swiperCurrent'>
</u-tabs>
</u-sticky>
<swiper :current="swiperCurrent" @animationfinish="animationfinish" class="swiper-list">
<swiper-item class="swiper-item" v-for="(item, index) in tabs" :key="index">
<scroll-view scroll-y style="width: 100%;height: 100%;" @scrolltolower="onreachBottom" refresher-enabled='true'
<list-box></list-box>
</scroll-view>
</swiper-item>
</swiper>
javascript
<script>
data() {
return {
tabList: [{
name: '全部',
}, {
name: '待付款',
}],
swiperCurrent: 0, // swiper组件的current值,表示当前那个swiper-item是活动的
}
},
methods:{
// tabs通知swiper切换
tabsChange(obj) {
this.swiperCurrent = obj.index;
},
// 由于swiper的内部机制问题,快速切换swiper不会触发dx的连续变化,需要在结束时重置状态
// swiper滑动结束,分别设置tabs和swiper的状态
animationfinish(e) {
this.swiperCurrent = e.detail.current;
}
}
</script>
javascript
<style lang="scss" scoped>
.swiper-list {
background-color: #f5f5f5;
// height: 100vh; 这里的100vh要改成90,不然会出现两个滚动条
height: 90vh;
width: 100%;
}
</style>