uni选项卡3

<template>
    <view class="">
        <view class="container">
            <!-- 顶部选项卡 -->
            <scroll-view class="pagecontrol-top-scroll" scroll-x="true" scroll-with-animation
                :scroll-into-view="scrollInto">
                <view class="pagecontrol-top-title">
                    <view v-for="(item, index) in itemsArr" :key="index" class="pagecontrol-top-text"
                        @click="changeTab(index)" :id="'tab' + index">
                        <view :class="tabIndex === index ? 'pagecontrol-top-selected' : 'pagecontrol-top-normal'">
                            {{ item }}</view>
                        <view class="pagecontrol-bottom-line"
                            :class="tabIndex === index ? 'pagecontrol-bottom-line-show' : 'pagecontrol-bottom-line-visibility'">
                        </view>
                    </view>
                </view>
            </scroll-view>

            <!-- 内容 -->
            <swiper :duration="150" :current="tabIndex" @change="onChangeTab" :style="'height:' + scrollH + 'px;'">
                <swiper-item v-for="(item, index) in itemsArr" :key="index">
                    <scroll-view scroll-y="true" show :style="'height:' + scrollH + 'px;'"
                        style="background-color: #F5F5F5;">
                        <template v-if="true">
                            <!-- 列表 -->
                            <view v-for="(item2, index2) in orderList" :key="index2">
                                <!-- 列表样式 -->
                                <view class="order-item">
                                    <view class="order-top-view">
                                        <view class="order-store-name">{{ item2.title }}</view>
                                        <view class="order-status">已预约</view>
                                    </view>
                                    <view class="order-content">
                                        <view class="">
                                            <view class="order-name">名称：{{ item2.name }}</view>
                                            <view class="order-date">日期：{{ item2.createTime }}</view>
                                        </view>
                                        <view class="price">
                                            <text>￥</text>
                                            <text style="font-size: 18px;">77</text>
                                            <text style="font-size: 14px;">.50</text>
                                        </view>
                                    </view>
                                    <!-- 操作按钮 -->
                                    <view class="bottom-buttons">
                                     <view class="button-tag">删除</view>
                                        <view class="button-tag">取消</view>
                                        <view class="button-tag" style="background-color: #0abafa; color: white;">预约
                                        </view>
                                    </view>
                                </view>
                            </view>
                     </template>

                        <!-- 无数据提示 -->
                        <template v-else>
                            <fq-empty empty-text="暂无订单"></fq-empty>
                        </template>
                    </scroll-view>
                </swiper-item>
            </swiper>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                itemsArr: ['代付款', '配送中', '售后/退款', '全部'],
                tabIndex: 0,
                scrollInto: '',
                scrollH: 660,
                orderList: [{
                        id: 1,
                        title: '红烧肉',
                        name: '肉类',
                        createTime: '2022-02-17'
                    },
                    {
                        id: 2,
                        title: '红烧肉',
                        name: '肉类',
                        createTime: '2022-04-27'
                    },
                    {
                        id: 2,
                        title: '红烧肉',
                        name: '肉类',
                        createTime: '2022-04-27'
                    },
                    {
                        id: 2,
                        title: '红烧肉',
                        name: '肉类',
                        createTime: '2022-04-27'
                    },
                    {
                        id: 2,
                        title: '红烧肉',
                        name: '肉类',
                        createTime: '2022-04-27'
                    },
                    {
                        id: 2,
                        title: '红烧肉',
                        name: '肉类',
                        createTime: '2022-04-27'
                    },
                    {
                        id: 2,
                        title: '红烧肉',
                        name: '肉类',
                        createTime: '2022-04-27'
                    },
                    {
                        id: 2,
                        title: '红烧肉',
                        name: '肉类',
                        createTime: '2022-04-27'
                    }
                ]
            };
        },
        methods: {
            // 监听滑动
            onChangeTab(e) {
                this.changeTab(e.detail.current);
            },
            // 切换选项
            changeTab(index) {
                console.log(index);
                if (this.tabIndex === index) {
                    return;
                }
                this.tabIndex = index;
                // 滚动到指定元素
                this.scrollInto = 'tab' + index;
            }
        },
        onLoad() {
            uni.getSystemInfo({
                success: res => {
                    console.log('wuwuFQ:', res);
                    this.scrollH = res.windowHeight - 40;
                    // #ifdef MP
                    this.scrollH -= 44;
                    // #endif
                    console.log('wuwuFQ:', this.scrollH);
                }
            });
        },
    };
    
</script>

<style>
    page {
        /* height:100vh; */
        background: #E5E5E5;
    }

    .top {
        position: fixed;
        top: 0;
        left: 0;
        width: calc(100% - 80rpx);
        padding: 0 40rpx;
        background-color: #fff;
    }

    .search {
        padding: 10rpx 0;
    }

    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .logo {
        height: 200rpx;
        width: 200rpx;
        margin-top: 200rpx;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 50rpx;
    }

    .text-area {
        display: flex;
        justify-content: center;
    }

    .title {
        font-size: 36rpx;
        color: #8f8f94;
    }

    /* .................... */
    .pagecontrol-top-scroll {
        height: 40px;
        width: 100%;
        white-space: nowrap;
        box-sizing: border-box;
        border-bottom-width: 1rpx;
        border-bottom-style: solid;
        border-bottom-color: #ededed;
    }

    .pagecontrol-top-title {
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: space-around;
    }

    .pagecontrol-top-text {
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .pagecontrol-top-normal {
        color: black;
        font-size: 16px;
    }

    .pagecontrol-top-selected {
        color: #0abafa;
        font-size: 17px;
    }

    .pagecontrol-bottom-line {
        width: 100%;
        height: 1px;
        margin-top: 2px;
        background-color: #0abafa;
    }

    .pagecontrol-bottom-line-show {
        visibility: visible;
    }

    .pagecontrol-bottom-line-visibility {
        visibility: hidden;
    }

    .order-item {
        background-color: #ffffff;
        padding: 20rpx;
        border-radius: 15rpx;
        margin: 15rpx;
    }

    .order-top-view {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10rpx;
    }

    .order-store-name {
        font-size: 16px;
        font-weight: 500;
    }

    .order-status {
        font-size: 12px;
        color: #a5a5a5;
    }

    .order-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .order-date {
        margin: 6rpx 0;
    }

    .bottom-buttons {
        margin-top: 10rpx;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .button-tag {
        margin-left: 40rpx;
        height: 30px;
        line-height: 30px;
        padding: 0 20px;
        border-radius: 15px;
        color: #a5a5a5;
        border: 1px solid #ededed;
    }
</style>