konsei 2019-01-15 10:59 采纳率: 72.2%
浏览 4784
已采纳

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

这是页面代码

<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条回答 默认 最新

  • konsei 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%;
    }
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥65 永磁型步进电机PID算法
  • ¥15 sqlite 附加(attach database)加密数据库时,返回26是什么原因呢?
  • ¥88 找成都本地经验丰富懂小程序开发的技术大咖
  • ¥15 如何处理复杂数据表格的除法运算
  • ¥15 如何用stc8h1k08的片子做485数据透传的功能?(关键词-串口)
  • ¥15 有兄弟姐妹会用word插图功能制作类似citespace的图片吗?
  • ¥200 uniapp长期运行卡死问题解决
  • ¥15 latex怎么处理论文引理引用参考文献
  • ¥15 请教:如何用postman调用本地虚拟机区块链接上的合约?
  • ¥15 为什么使用javacv转封装rtsp为rtmp时出现如下问题:[h264 @ 000000004faf7500]no frame?