问题代码如下
<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; }