uniapp中scroll-view横向滚动设置不生效

布满荆棘的人生 2022-11-13 11:20 1989阅读 0赞

HTML代码：

  1. <scroll-view scroll-x="true" class="scrollView">
  2.     <view v-for="(item,index) in arr" :key="index">{ { item}}</view>
  3. </scroll-view>

CSS代码(经测试此方法不可以)：

  1. .scrollView{ 
  2.         width: 100%;
  3.         height: 100rpx;
  4.         display: flex;
  5.         flex-wrap: nowrap;
  6.     }
  7.     .scrollView view{ 
  8.         width: 200rpx;
  9.         line-height: 100rpx;
  10.         text-align: center;
  11.     }

视图：
在这里插入图片描述
问题：scroll-view横向滚动未生效

原因：元素自动换行导致宽度达不到效果

解决方法：给scroll-view标签加上 white-space: nowrap; 属性就可以滚动了

注意：

  1. display: flex; flex-wrap: nowrap; 并不能替代 white-space: nowrap; 的效果
  2. 需要给view设置 display: inline-block; 使view成为行内块元素

CSS代码(经测试可以实现)：

  1. .scrollView{ 
  2.     width: 100%;
  3.     height: 100rpx;
  4.     white-space: nowrap;
  5. }
  6. .scrollView view{ 
  7.     display: inline-block;
  8.     width: 200rpx;
  9.     line-height: 100rpx;
  10.     text-align: center;
  11. }

视图:
在这里插入图片描述

发表评论

表情：
评论列表 （有 0 条评论，1989人围观）

还没有评论，来说两句吧...

相关阅读