uniapp tabsSwiper全屏选项卡(uView2.0)

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

 

posted @ 2022-03-11 15:38  龙卷风吹毁停车场  阅读(3174)  评论(0)    收藏  举报