下面代码运行后发现grid-body是长为0宽也为0说出原因并配置代码让grid-body以两列显示Wxml页面!--pagessorts-listsorts-listwxml--view class=page !-- tab导航栏 -- scroll-view scroll-x=true class=nav scroll-left=navScrollLeft scroll-with-animat

原因：grid-body没有设置高度和宽度，且没有内容填充。

配置代码：

在 .weui-tab__content 中添加以下样式：

.grid-body { height: 100%; width: 100%; display: flex; flex-wrap: wrap; }

在 van-grid-item 中添加以下样式：

width: calc(50% - 5px);

其中 -5px 是因为设置了 gutter 为 10px，需要减去一半作为间距。

完整代码：

.weui-tab__content { padding-top: 100rpx; text-align: center; font-size: 32rpx; }

.nav { height: 86rpx; text-align: center; color: #A8A8A8; font-size: 4vw; background-color: #FFF; border-bottom: 1rpx solid #DFDFDF; width: 100%; box-sizing: border-box; overflow: hidden; line-height: 80rpx; white-space: nowrap; position: fixed; top: 0; left: 0; z-index: 99; }

.nav-item { width: 22%; display: inline-block; text-align: center; }

.nav-item.active { transition: all 0.3s; border-bottom: 10rpx solid #478ff3; color: #478ff3; }

.grid-body { height: 100%; width: 100%; display: flex; flex-wrap: wrap; }

.van-grid-item { width: calc(50% - 5px);