TJ1532635942
白桦yuma
采纳率90.2%
2019-01-15 10:59 浏览 4.0k

微信小程序中使用swiper包裹内容后超出屏幕的内容无法显示怎么办?

5

这是页面代码

<swiper current="{{currentTab}}" class="swiper-box" duration="300"  bindchange="bindChange">

  <!-- 待付款 -->
  <swiper-item> 

    <view class='order_box'>
    </view>
    <view class='order_box'>
    </view>
    <view class='order_box'>
    </view>
  </swiper-item>

</swiper>

这是wcss代码

.order_box{
  width: 98%;
  height: 50%;
  border: 2rpx solid #666;
  margin: 8% 1%;
}


.swiper-box{ 
  width: 100%; 
  height: 100%;
  } 

当不用swiper和swiper-item包裹那3个view时,超出的view可以通过向下滑动看见,如图
图片说明

但包裹后就无法滑动了,怎么让它也可以滑动?
如图
图片说明

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

1条回答 默认 最新

  • 已采纳
    TJ1532635942 白桦yuma 2019-01-15 11:16

    好吧,我找到方式了,在swiper-item里加个scroll-view,并给个scroll-y,将scroll-view高度设为100%就可以了,如下

    <swiper current="{{currentTab}}" class="swiper-box" duration="300"  bindchange="bindChange">
    
      <swiper-item> 
      <scroll-view scroll-y='true'>
        <view class='order_box'>
        </view>
        <view class='order_box'>
        </view>
        <view class='order_box'>
        </view>
        </scroll-view>
      </swiper-item>
    
    </swiper>
    
    .order_box{
      width: 98%;
      height: 50%;
      border: 2rpx solid #666;
      margin: 8% 1%;
    }
    
    
    .swiper-box{ 
      width: 100%; 
      height: 100%;
      } 
    
    scroll-view{
      height: 100%;
    }
    
    
    点赞 3 评论 复制链接分享

相关推荐