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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/soindy/article/details/79327215

微信开发工具 v1.02.1802080

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

设置具体初始高度: style="height:{{winHeight}}px"

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

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

示例代码:

wxml 中:

<swiper current="{{currentTab}}" 
        style="height:{{winHeight - 31}}px"  
        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%;
}
阅读更多

没有更多推荐了,返回首页