tabs 点击滚动切换 内容滑动时 tab跟着变化 seiper 高度自适应

上面一排tab导航， 下面切换滚动

这是一个完整的组件, 可以直接使用

<template>
    <view>

        <!-- 导航切换 -->
        <view class="tab-bars">
            <scroll-view class="tab-bar" scroll-x="true" show-scrollbar="false" :scroll-into-view="scrollInto"
                         scroll-with-animation="true">
                <view class="tab-bars-list" :class="{'active': tabIndex === item.id}" v-for="(item, index) in tabList"
                      :key="index" @click="onClickTab(index)" :id="'tab-'+item.id">
                    {{item.title}}
                </view>
            </scroll-view>
            <navigator class="tab-bar-right">
                <image src="/static/icon-like-4.png" mode="aspectFit" class="tab-bars-message"></image>
            </navigator>
        </view>

        <swiper class="tab-view" :style="{height: swiperheight + 'px'}" :current="tabIndex" :duration="300"
                @change="onChangeSwiper">
            <swiper-item class="tab-view-item" v-for="(tab, index) in tabList" :key="index">
                <!-- 首页 -->
                <view v-if="tab.id===1" class="tab-view-item-content fw">
                    <!-- 轮播 -->
                    <swiper class="swiper" :autoplay="true" :circular="true" indicator-dots="true"
                            indicator-active-color="#fff" indicator-color="rgba(255,255,255,.3)">
                        <swiper-item v-for="(item, indexList) in list" :key="indexList + 'item'">
                            <image :src="item.src" mode="scaleToFill"></image>
                        </swiper-item>
                    </swiper>

                    <!-- 查看更多 -->
                    <view class='titles'>
                        <view class="titles-left">
                            <image src="/static/icon-like-4.png" mode="aspectFit" class="titles-icon"></image>
                            <text class="titles-left-text">推荐主播</text>
                        </view>
                        <navigator class="titles-more">查看更多 ></navigator>
                    </view>

                    <!-- 轮播下的左右滑动 -->
                    <scroll-view scroll-x="true" class="scroll-view" :show-scrollbar="false">
                        <tiger-list :list="list" class="tjzb-imgs"></tiger-list>
                    </scroll-view>

                    <!-- 排行榜 -->
                    <view class="ranking-lists">
                        <navigator class="ranking-list">收益榜</navigator>
                        <navigator class="ranking-list">贡献榜</navigator>
                    </view>

                    <!-- 热门主播 -->
                    <view class='titles'>
                        <view class="titles-left">
                            <image src="/static/icon-like-4.png" mode="aspectFit" class="titles-icon"></image>
                            <text class="titles-left-text">热门主播</text>
                        </view>
                    </view>

                    <view class="hot-anchors-boxs">
                        <tiger-list :list="list" class="hot-anchors"></tiger-list>
                    </view>

                    <!-- <template v-if="uniLoadMore == 'more'">

                    </template> -->
                    <uni-load-more :status="uniLoadMore" iconType="circle" />
                </view>

                <!-- 其他分类列表. -->
                <view v-else class="tab-view-item-content fw">
                    <tiger-list :list="list" class="fw"></tiger-list>
                    <uni-load-more :status="uniLoadMore" iconType="circle" />
                </view>
            </swiper-item>
        </swiper>
    </view>
</template>

<script>
    import config from '@/utils/config.js';
    import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue";
    import tigerList from "./list.vue";
    export default {
        components: {
            uniLoadMore,
            tigerList
        },
        data() {
            return {
                'scrollInto': '',
                'swiperheight': 0,
                'tabIndex': 0,
                'uniLoadMore': 'more',
                'tabList': [{
                    'title': '关注1',
                    'id': 0
                },
                    {
                        'title': '关注2',
                        'id': 1
                    },
                    {
                        'title': '关注3',
                        'id': 2
                    }
                ],
                'list': [{
                    'src': '/static/live/topic-top.png',
                    'id': 0
                },
                    {
                        'src': '/static/live/topic-top.png',
                        'id': 0
                    },
                    {
                        'src': '/static/live/topic-top.png',
                        'id': 1
                    },
                    {
                        'src': '/static/live/topic-top.png',
                        'id': 1
                    },
                    {
                        'src': '/static/live/topic-top.png',
                        'id': 1
                    },
                    {
                        'src': '/static/live/topic-top.png',
                        'id': 2
                    },
                    {
                        'src': '/static/live/topic-top.png',
                        'id': 3
                    },
                    {
                        'src': '/static/live/topic-top.png',
                        'id': 3
                    },
                    {
                        'src': '/static/live/topic-top.png',
                        'id': 4
                    },
                    {
                        'src': '/static/live/topic-top.png',
                        'id': 3
                    },
                    {
                        'src': '/static/live/topic-top.png',
                        'id': 4
                    }
                ]
            }
        },
        mounted() {
            this.getElementHeight('.tab-view-item-content');
        },
// updated() {
// this.getElementHeight('.tab-view-item-content');
// },
        onPullDownRefresh() {
            console.log('refresh');
            setTimeout(function() {
                uni.stopPullDownRefresh();
            }, 1000);
        },
        onReachBottom() {
            console.log('onReachBottom');
            this.uniLoadMore = 'loading';
            setTimeout(() => {
                this.uniLoadMore = 'noMore';
            }, 1000)
        },
        methods: {
            getElementHeight(element) {
// setTimeout(() => {}, 10)
                let query = uni.createSelectorQuery().in(this);
                query.selectAll(element).boundingClientRect();
                query.exec((res) => {
                    if (!res) { //如果没获取到，再调一次
                        this.getElementHeight();
                    } else {
                        this.swiperheight = res[0][this.tabIndex].height;
                    }
                })
            },
            onClickTab(index) {
                if (this.tabIndex === index) return;
                this.onSwitchTab(index);
            },
            onSwitchTab(index) {
                this.tabIndex = index;
                const scrollIntoIndex = index - 1;
                this.scrollInto = 'tab-' + this.tabList[scrollIntoIndex < 0 ? 0 : scrollIntoIndex].id;
                this.getElementHeight('.tab-view-item-content');
            },
            onChangeSwiper(e) {
                let index = e.target.current || e.detail.current;
                this.onSwitchTab(index);
            },
        }
    }
</script>

<style lang="scss" scoped>
    .pdl10 {
        padding-left: 10rpx;
    }

    .titles {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx 10rpx;
    }

    .titles-left {
        display: flex;
        align-items: center;
    }

    .titles-left-text {
        font-weight: bold;
    }

    .titles-more {
        font-size: 12rpx;
        color: #999;
    }

    .titles-icon {
        margin-right: 5rpx;
        width: 38rpx;
        height: 36rpx;
    }

    .scroll-view {

        flex-direction: row;
        white-space: nowrap;
    }

    .ranking-lists {
        display: flex;
        padding: 12rpx 20rpx 0;
    }

    .ranking-list {
        margin-right: 15px;
        width: 380rpx;
        height: 160rpx;
        background: #000;
    }

    .ranking-list:nth-of-type(2) {
        margin-right: 0;
    }


    .hot-anchors-boxs {
        overflow: hidden;
        padding: 0 8rpx 0 10rpx;

        .hot-anchors /deep/ .more-imgs {
            width: 360rpx;

            .more-img {
                width: 100%;
            }
        }

    }

    .hot-anchors /deep/ .more-imgs:nth-child(2n) {
        margin-right: 0;
    }

    .tjzb-imgs /deep/ .more-imgs {
        display: inline-block;
        float: none;
    }

    .tab-bars {
    // position:fixed;
    // left:0;
    // top:0;
    // z-index: 9999;
        width: 100%;
        background: #fff;
        display: flex;
        justify-content: space-between;
        padding: 0 32rpx 0 10rpx;
        color: #666;
        font-weight: bold;

        .tab-bars-message {
            margin: 0 0 0 10rpx;
            width: 40rpx;
            height: 40rpx;
        }

        .tab-bar {
            width: 650rpx;
            height: 66rpx;
            white-space: nowrap;
            display: inline-block;
        }

        .tab-bar-right {
            display: inline-block;
            padding: 4px 13px 0 0;
        }

        .tab-bars-list {
            display: inline-block;
            margin-bottom: 10rpx;
            height: 56rpx;
            padding: 0 14rpx;
            line-height: 56rpx;
        }

        .tab-bars-list.active {
            border-bottom: 4rpx red solid;
            color: #000;
            font-size: 30rpx;
        }
    }

    .tab-view {
    // padding-top:68rpx;
    }
</style>