tab实现

<view class="sport-tab">
            <view :class="current == i? 'sport-select-tab':'sport-normal-tab'" v-for="(item, i) in navs" :key="i" @click="navsHandleClick(i)">{{ item.lable }}</view>
        </view>

注意根部view的样式高度100vh

底部实现

<swiper class="sport-swiper-box" @change="intervalChange" :current="current" duration="0">
            <swiper-item>
                <scroll-view style="height: 100%;" scroll-y="true">
                    <view class="sport-swiper-item-left" v-for="(item,index) in sportList" :key="item.id">
                        <image class="sport-swiper-item-lef-imag" src="../../static/assets/icon-grander-nan.png"></image>
                        <text>游泳</text>
                        <text class="sport-swiper-item-left-consume">游泳</text>
                    </view>
                </scroll-view>
            </swiper-item>
            <swiper-item>
                <view class="sport-swiper-item">2</view>
            </swiper-item>
        </swiper>

注意swiper的高度实现撑满flex：1，不要忘了scroll-view 的高度一定要写不然滚动无效，最好写法heigh：100%