微信小程序使用u-view实现选项卡功能

话不多说，直接上代码：

<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">
                <scroll-view scroll-y style="height: 800rpx;width: 100%;" v-if="index==0">
                    {{item.value}}
                </scroll-view>
                <scroll-view scroll-y style="height: 800rpx;width: 100%;" v-else-if="index==1">
                    {{item.value}}
                </scroll-view>
                <scroll-view scroll-y style="height: 800rpx;width: 100%;" v-else-if="index==2">
                    {{item.value}}
                </scroll-view>
                <scroll-view scroll-y style="height: 800rpx;width: 100%;" v-else-if="index==3">
                    {{item.value}}
                </scroll-view>
            </swiper-item>
        </swiper>
    </view>
    </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">
    .product-list {}
</style>