van-grid-item 长宽为 0 导致 grid 中图片不显示的解决方法

在使用 van-grid 组件时，如果发现 van-grid-item 标签的长宽为 0，导致 grid 中只出现了文字而没有图片，可以尝试设置 van-grid-item 的宽度和高度以及其父级元素 van-grid 的宽度和高度。

在 van-grid-item 标签中加入 style 属性设置宽度和高度为 100% 是正确的做法，但是需要注意的是，van-grid-item 的父级元素（即 van-grid）也需要设置宽度和高度，否则设置的宽度和高度并没有参考物，无法生效。因此，需要将 van-grid 的宽度设置为 100%，高度设置为 300rpx，才能让 van-grid-item 的宽度和高度生效。修改后的代码如下：

<!--pages/sorts-list/sorts-list.wxml-->
<view class='page'>
  <!-- tab导航栏 -->
  <scroll-view scroll-x='true' class='nav' scroll-left='{{navScrollLeft}}' scroll-with-animation='{{true}}'>
    <block wx:for='{{navData}}' wx:for-index='idx' wx:for-item='navItem' wx:key='idx'>
      <view class='nav-item {{currentTab == idx ?'active':''}}' data-current='{{idx}}' bindtap='switchNav'>
        <text>{{navItem}}</text>
      </view>
    </block>
  </scroll-view>
  <!-- 页面内容 -->
  <view class='weui-tab__panel'>
    <!-- 第1个页面 -->
    <view class='weui-tab__content' hidden='{{currentTab != 0}}'>
      <van-grid class='grid-body' column-num='2' style='width: 100%; height: 300rpx;'>
        <van-grid-item text='[自习室]特惠课' to='/inspection' style='width: 100%; height: 100%;'>
          <div slot='default'>
            <img src='../../images/sort/1.png' alt />
          </div>
        </van-grid-item>
        <van-grid-item text='[托管作业]特惠课' to='/inspection' style='width: 100%; height: 100%;'>
          <div slot='default'>
            <img src='../../images/sort/2.png' alt />
          </div>
        </van-grid-item>
      </van-grid>
    </view>
    <!-- 第2个页面 -->
    <view class='weui-tab__content' hidden='{{currentTab != 1}}'>
      2
    </view>
    <!-- 第3个页面 -->
    <view class='weui-tab__content' hidden='{{currentTab != 2}}'>
      3
    </view>
    <!-- 第4个页面 -->
    <view class='weui-tab__content' hidden='{{currentTab != 3}}'>
      4
    </view>
    <!-- 第5个页面 -->
    <view class='weui-tab__content' hidden='{{currentTab != 4}}'>
      5
    </view>
    <!-- 第6个页面 -->
    <view class='weui-tab__content' hidden='{{currentTab != 5}}'>
      6
    </view>
    <!-- 第7个页面 -->
    <view class='weui-tab__content' hidden='{{currentTab != 6}}'>
      7
    </view>
    <!-- 第8个页面 -->
    <view class='weui-tab__content' hidden='{{currentTab != 7}}'>
      8
    </view>
  </view>
</view>

/* pages/sorts-list/sorts-list.wxss */
.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;
}
.van-grid-item{
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
}

这样就可以解决 van-grid-item 长宽为 0 的问题，让图片正常显示在 grid 中了。