![](https://i-blog.csdnimg.cn/blog_migrate/ea70c0dcbfd1dfb6fdc7adbb0b95fa16.gif)
<div>
<div>
<!-- <u-sticky bgColor="#fff"> -->
<u-tabs :list="videoList" ref="uTabs" :current="currentNum" lineHeight="6" @change="tabsChange"></u-tabs>
<!-- </u-sticky> -->
</div>
<div>
<swiper :current="swiperCurrent" @change="transition" class="vie" :style="{'height':`${anchor.deviceHeight}px`}">
<swiper-item class="swiper-item vie_item" v-for="(item, index) in tabs" :key="index">
<div class="anchor-top"></div>
<!-- <scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom"> -->
<div class="listItemContent" :style="{'padding-bottom': `${safeAreaBottom*2+100}rpx`}" @click="goDetail">
<div class="listItem margin-bottom-sm" v-for="(itemmm, indexxx) in item" :key="indexxx">
{{itemmm.value}}
</div>
</div>
<!-- </scroll-view> -->
<div class="anchor-bottom"></div>
</swiper-item>
</swiper>
<view class="anchor-screen-bottom"></view>
</div>
</div>
</div>
<script>
import { mapState } from 'vuex';
export default {
data() {
return {
swiperCurrent: 0,
currentNum: 0,
tabs: [
[
{ value: '111111111111' }, { value: '2222222222' }, { value: '33333333' }, { value: '4444444' },
{ value: '5555' }, { value: '6666' }, { value: '77777' }, { value: '77777' }, { value: '77777' },
{ value: '77777' }, { value: '77777' }, { value: '77777' }, { value: '77777' }, { value: '000' },
],
[
{ value: 'aaaaaaa' }, { value: 'bbbbbbbbbbb' },
],
],
videoList: [
{ name: '臻选视频' },
{ name: '精选文章' },
],
anchor: { //处理swiper高度问题
deviceHeight: 0,
anchorTop: 0,
anchorBottom: 0,
anchorScreenBottom: 0
}
}
},
onPageScroll(e) {
// console.log(e.scrollTop);
this.scrollTop = e.scrollTop;
},
components: {},
computed: {
...mapState(["hasLogin", "safeAreaBottom"])
},
onLoad() {
this.computeSwiperHeight(0)
},
onShow() {},
methods: {
// tabs通知swiper切换
tabsChange(e) {
this.swiperCurrent = e.index;
},
// swiper-item左右移动,通知tabs的滑块跟随移动
transition(e) {
this.currentNum = e.detail.current
console.log(e.detail.current, '-------')
this.computeSwiperHeight(e.detail.current)
},
// scroll-view到底部加载更多
onreachBottom() {
console.log(11111111111)
},
computeSwiperHeight(pageIndex) {
let getSwiperHeight = () => {
let min = this.anchor.anchorScreenBottom - this.anchor.anchorTop;
let value = this.anchor.anchorBottom - this.anchor.anchorTop
return Math.max(min, value)
}
wx.createSelectorQuery()
.select('.anchor-screen-bottom')
.boundingClientRect()
.selectViewport()
.scrollOffset()
.exec(res => {
this.anchor.anchorScreenBottom = res[0]?.bottom
})
wx.createSelectorQuery()
.selectAll('.anchor-top')
.boundingClientRect()
.selectViewport()
.scrollOffset()
.exec(res => {
this.anchor.anchorTop = res[0][pageIndex]?.top
this.anchor.deviceHeight = getSwiperHeight()
})
wx.createSelectorQuery()
.selectAll('.anchor-bottom')
.boundingClientRect()
.selectViewport()
.scrollOffset()
.exec(res => {
this.anchor.anchorBottom = res[0][pageIndex]?.bottom
this.anchor.deviceHeight = getSwiperHeight()
})
},
goDetail() {
this.$jumpTo('/pages-home/articleDetail/index')
},
goPage(routeUrl) {
// console.log(routeUrl);
// jumpTo(routeUrl)
this.$jumpTo(routeUrl)
}
}
}
</script>