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

微信小程序中使用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%;
    }
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥50 易语言把MYSQL数据库中的数据添加至组合框
  • ¥20 求数据集和代码#有偿答复
  • ¥15 关于下拉菜单选项关联的问题
  • ¥20 java-OJ-健康体检
  • ¥15 rs485的上拉下拉,不会对a-b<-200mv有影响吗,就是接受时,对判断逻辑0有影响吗
  • ¥15 使用phpstudy在云服务器上搭建个人网站
  • ¥15 应该如何判断含间隙的曲柄摇杆机构,轴与轴承是否发生了碰撞?
  • ¥15 vue3+express部署到nginx
  • ¥20 搭建pt1000三线制高精度测温电路
  • ¥15 使用Jdk8自带的算法,和Jdk11自带的加密结果会一样吗,不一样的话有什么解决方案,Jdk不能升级的情况