收藏
回答

iphoneX上overflow:hidden失效,怎么解决?

//home.wxml
<scroll-view scroll-x="true" class="boxs">
  <view class="box">
    <view>
      <image style="width: 200rpx;" src="../../images/p2669942342.jpg"></image>
      <view style="white-space: normal;width: 200rpx; height: 200rpx;">纳瑞拉·库尔蒙科尔佩特 Narilya Gulmongkolpech</view>
    </view>
  </view>
  <view class="box">
    <view>
      <image style="width: 200rpx;" src="../../images/p2669942342.jpg"></image>
      <view style="white-space: normal;width: 200rpx; height: 200rpx;">纳瑞拉</view>
    </view>
  </view>
  <view class="box">
    <view>
      <image style="width: 200rpx;" src="../../images/p2669942342.jpg"></image>
      <view style="white-space: normal;width: 200rpx; height: 200rpx;">纳瑞拉·库尔蒙科尔佩特</view>
    </view>
  </view>
  <view class="box">
    <view>
      <image style="width: 200rpx;" src="../../images/p2669942342.jpg"></image>
      <view style="white-space: normal;width: 200rpx; height: 200rpx;">纳瑞拉·库尔蒙科尔佩特 Narilya Gulmongkolpech</view>
    </view>
  </view>
</scroll-view>

//home.wxss
.boxs{
  width100%;
  white-space: nowrap;
}
.boxs .box{
  overflow: hidden !important;
  display: inline-block;
}

//微信开发工具模拟器效果


//iphoneX上的效果



回答关注问题邀请回答
收藏

4 个回答

  • Guō
    Guō
    2021-09-11
    解决方案:
    1、在scroll-view中添加一个view包裹列表内容
    这样就不需要overflow:hidden了
    注意:虽然我也没办法用官方原理解决,但是以后使用scroll-view组件时最好在里面加一个view包裹
    
    
    //home.wxml
    <scroll-view scroll-x="true" class="boxs">
      <view class="boxss">
        <view class="box">
          <view>
            <image style="width: 200rpx;" src="../../images/p2669942342.jpg"></image>
            <view style="white-space: normal;width: 200rpx; height: 200rpx;">纳瑞拉·库尔蒙科尔佩特 Narilya Gulmongkolpech</view>
          </view>
        </view>
        <view class="box">
          <view>
            <image style="width: 200rpx;" src="../../images/p2669942342.jpg"></image>
            <view style="white-space: normal;width: 200rpx; height: 200rpx;">纳瑞拉</view>
          </view>
        </view>
        <view class="box">
          <view>
            <image style="width: 200rpx;" src="../../images/p2669942342.jpg"></image>
            <view style="white-space: normal;width: 200rpx; height: 200rpx;">纳瑞拉·库尔蒙科尔佩特</view>
          </view>
        </view>
        <view class="box">
          <view>
            <image style="width: 200rpx;" src="../../images/p2669942342.jpg"></image>
            <view style="white-space: normal;width: 200rpx; height: 200rpx;">纳瑞拉·库尔蒙科尔佩特 Narilya Gulmongkolpech</view>
          </view>
        </view>
      </view>
    </scroll-view>
    
    //home.wxss
    .boxs{
      width100%;
      white-space: nowrap;
    }
    .boxs .boxss{
      display: flex;
    }
    .boxs .box{
      display: inline-block;
    }
    
    2021-09-11
    有用 1
    回复
  • 枣树不结枣
    枣树不结枣
    发表于移动端
    2021-09-10
    欧盟
    2021-09-10
    有用 1
    回复
  • Listen
    Listen
    2021-09-11

    你并没有给.box加宽和高,如何hidden?

    2021-09-11
    有用
    回复 1
    • Guō
      Guō
      2021-09-11
      我原本认为它是因为BFC造成,所想想用overflow:hidden改变。后来才知道是scroll-view中没有再嵌套一个view,所以才导致scroll-view中的每一项出现我不可预测的效果
      2021-09-11
      回复
  • 李进海
    李进海
    发表于移动端
    2021-09-10
    饿的锁骨
    2021-09-10
    有用
    回复
登录 后发表内容