tabbar中下方页面不显示

<template>  
    <view class="uni-tab-bar">  
        <scroll-view id="tab-bar" class="uni-swiper-tab" scroll-x :scroll-left="scrollLeft">  
            <view v-for="(tab,index) in tabBars" :key="tab.id" :class="['swiper-tab-list',tabIndex==index ? 'active' : '']" :id="tab.id"  
             :data-current="index" @tap="tapTab">{{tab.name}}</view>  
        </scroll-view>  
        <swiper :current="tabIndex" class="swiper-box" duration="300" @change="changeTab">  
            <swiper-item v-for="(tab,index1) in newsitems" :key="index1">  
                <scroll-view class="list" scroll-y @scrolltolower="loadMore(index1)">  

                    <view class="uni-product-list">  
                        <view class="uni-product" v-for="(newsitem,index2) in tab.data" :key="index2">  
                            <view class="image-view">  
                                <image class="uni-product-image" :src="newsitem.image_url"></image>  
                            </view>  
                            <view class="uni-product-title">{{newsitem.title}}</view>  
                            <view class="uni-product-price">  
                                <text class="uni-product-price-original">￥{{newsitem.comment_count}}</text>  
                                <text class="uni-product-tip">{{newsitem.datetime}}</text>  
                            </view>  
                        </view>  
                    </view>  

                    <view class="uni-tab-bar-loading">  
                        <uni-load-more :loadingType="tab.loadingType" :contentText="loadingText"></uni-load-more>  
                    </view>  
                </scroll-view>  
            </swiper-item>  
        </swiper>  
    </view>  

</template>

swiper-box这个没有高度，加了高度就显示出来了，没用有组件难道不行吗?用的是hello的商品模板css都没动