UniApp 中滚动失败原因

29 阅读1分钟

问题代码如下

<scroll-view scroll-y  class="productList">
   <view v-for="(p,i) in products" :key="p.id" 
   class="product-item" :style="{ top: (i*150)+'px' }" @tap="viewProduct(p)">
          <text class="text-3_158">{{ p.name }}</text>
          <text class="text-3_159">{{ p.price }}</text>
         
          <text class="text-3_161">{{ p.desc }}</text>
          <text class="text-3_162">选规格</text>
    </view>
</scroll-view>

我给每个 view 设置了 :style="{ top: (i*150)+'px' }",这会让子元素都用绝对定位堆叠在容器里,导致 scroll-view 无法正常滚动

因此把这个style删去,同时再在scope里面设置position为相对的,以及相关样式即可

.product-item { 
  width: 310px;
  height: 150px;
  overflow: hidden;
  position: relative;
  left: 0px; }