问题描述：在<scroll-view>标签里写了多个盒子product，在给product里写内容的时候ios出现了以下情况

上面的一大片空白根本不知道从哪来的！！！？？？23333....

附上部分代码：

<swiper class="scrollViewY" style="height:{{width - 132}}px" vertical>

    <swiper-item>

        <scroll-view scroll-y bindscrolltolower="Toload" style="width:100%;height:100%;"> 

            <view class="product">

                <view class="boxImg">

                <image src="https://*****/data/images/goods/91320509693377758B/zhiqudanyuanti.png"></image>

                </view>

                <view class="model">MT-HY03T-19</view>

                <view class="productName">欧普智趣坐姿提醒台灯</view>

            </view>

            .....

        </scroll-view>

    </swiper-item>

</swiper>

wxss:

.page .scrollViewY{

display: block;

width: 100%;

}

.page .scrollViewY .product{

width: 345rpx;

height: 420rpx;

background: #fff;

display: inline-block;

margin-left: 20rpx;

margin-top: 12rpx;

overflow: hidden;

border-radius:12rpx;

}

.page .scrollViewY swiper-item{

overflow: hidden

}

.page .scrollViewY .product .boxImg{

width: 100%;

height: 200rpx;

margin: 14rpx auto 0;

padding-bottom: 10rpx;

border-bottom: 1rpx solid #f8f8f8;

}

.page .scrollViewY .product .boxImg image{

width: 200rpx;

height: 100%;

margin: 0 auto;

display: block;

}

.page .scrollViewY .product .model{

font-size: 22rpx;

color: #222;

line-height: 22rpx;

margin-left: 20rpx;

margin-top: 22rpx;

}

.page .scrollViewY .product .productName{

font-size: 30rpx;

color: #222;

line-height: 30rpx;

margin-left: 20rpx;

margin-top: 8rpx;

}

如果只是写一张图片放进去，还没问题，只要一开始写下面的文字部分，就出现这个了，请问这是什么问题哇？？？2333.....