<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>