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