菜鸟问题

想问一下右边为什么没显示？

wxml:

<view class="brand-list">

  <scroll-view scroll-y>

    <view class="brand-item" wx:for="{{brands}}" wx:key="num" bindtap="selectBrand" data-num="{{item.num}}">

      {{item.name}}

    </view>

  </scroll-view>

</view>

<view class="product-detail">

  <scroll-view scroll-y>

    <view class="product-item" wx:for="{{selectedProducts}}" wx:key="num">

      <view class="product-name">{{item.name}}</view>

    </view>

    <view wx:if="{{selectedProducts.length === 0}}" class="no-products">没有商品信息</view>

  </scroll-view>

</view>

wxss:

/* pages/index/index.wxss */

.container {

  display: flex; /* 使用 Flexbox 布局 */

  height: 100vh; /* 使容器高度占满整个视口 */

}

.brand-list {

  width: 20%; /* 左侧品牌列表占屏幕宽度的20% */

  background-color: #f0f0f0; /* 背景颜色 */

  padding: 10px; /* 内边距 */

  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */

}

.brand-item {

  padding: 10px; /* 内边距 */

  border-bottom: 1px solid #e0e0e0; /* 底部边框 */

  cursor: pointer; /* 鼠标悬停时显示为可点击 */

}

.product-detail {

  width: 80%; /* 右侧商品详情占屏幕宽度的80% */

  padding: 10px; /* 内边距 */

}

.product-item {

  margin-bottom: 10px; /* 下边距 */

}

.product-name {

  font-size: 16px; /* 字体大小 */

  color: rgb(99, 18, 175); /* 字体颜色 */

}