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>

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM