<template>
<view class="product-list">
<u-sticky bgColor="#fff" >
<u-tabs :list="list1" ref="uTabs" :current="current" @change="tabsChange"></u-tabs>
</u-sticky>
<swiper :current="swiperCurrent" @change="transition">
<swiper-item class="swiper-item" v-for="(item, index) in tabs" :key="index">
<scroll-view scroll-y style="height: 800rpx;width: 100%;" @scrolltolower="onreachBottom">
{{item.value}}
</scroll-view>
</swiper-item>
</swiper>
</view>
</template>
<script>
export default {
data() {
return {
swiperCurrent: 0,
current: 0,
tabs:[
{value:'111111111111'},
{value:'222222222222'},
{value:'333333333333'},
{value:'444444444444'},
],
list1: [{
name: '关注',
}, {
name: '推荐',
}, {
name: '电影'
}, {
name: '科技'
}]
}
},
methods:{
// tabs通知swiper切换
tabsChange(e) {
this.swiperCurrent = e.index;
},
// swiper-item左右移动,通知tabs的滑块跟随移动
transition(e) {
this.current = e.detail.current
console.log(e.detail.current,'-------')
},
// scroll-view到底部加载更多
onreachBottom() {
console.log(11111111111)
}
}
}
</script>
<style lang="scss" scoped>
.product-list{
}
</style>
