微信小程序: swiper 的 swiper-item 下 scroll-view 无法滚动

Posted 2023-02-17 大大大大大桃子

微信开发工具 v1.02.1802080

swiper-item 和 scroll-view 及其中间的所有 view 都需要设置 height: 100%;

设置具体初始高度: style="height:winHeightpx"

如果仍然有问题, 需要设置scroll-view的滚动方向 :

scroll-x="false" 
scroll-y="true"

示例代码:

wxml 中:

<swiper current="currentTab" 
        style="height:winHeight - 31px"  
        class="swiper-box" 
        duration="300">
  <!-- 已承担 -->
  <swiper-item class="swiper-items">
    <scroll-view scroll-x="false" scroll-y="true" class='scroll-views'>
        <block wx:for="items" wx:key="col_index"> 
          <template is="undertookCard" data="...item"/>
       </block>  
    </scroll-view>
  </swiper-item> 
</swiper>

wxss 中;

.swiper-box 
    display: block; 
    width: 100%; 
    height: 100%; 
    margin-top: 92rpx; 
    overflow: hidden;
  
.swiper-items
  height: 100%;

.scroll-views
  height: 100%;