2019-03-13scroll-view 横向滚动滑动无效

在小程序中做一个横向滚动的视图,直接用 scroll-view,然后再配一个 scroll-x="true" 的属性就行了,难道真有这么简单吗?

WXML:

<scroll-view class='membersCategoryItemSV' scroll-x="true">
  <block wx:for="{{[1,2,3,4,5]}}" wx:for-index="subIndex" wx:key="subItem" wx:for-item="subItem">
    <view class='memberItemCover'>
      <text>{{subItem}}</text>
    </view>
  </block>
</scroll-view>

CSS:

.membersCategoryItemSV {
  height: 240rpx;
  background-color: #ff639b;
}
 
.memberItemCover {
  width: 240rpx;
  height: 240rpx;
  background-color: white;
  margin-right: 20rpx;
}

结果很悲伤,完全无法滚动起来。


想让scroll-view滚动起来,必须添加 white-space: nowrap; display: inline-block; 这两个属性才行!

完整CSS:

.membersCategoryItemSV {
  height: 240rpx;
  background-color: #ff639b;
  white-space: nowrap;
}
 
.memberItemCover {
  width: 240rpx;
  height: 240rpx;
  display: inline-block;
  background-color: white;
  margin-right: 20rpx;
}
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 李尔纳老师说痛和恐惧让它浮出来感受它接受它,我刚刚体会到确实有点痛。对于壳很厚的人采取措施就是别理他,很多都不...
    誼君阅读 190评论 1 0
  • 目标:100天内,能够很清晰地知道自己想要什么,对于自己的内心很明确,更加平安喜乐,身体健康,养成运动的好习惯。 ...
    Betty丽丽阅读 232评论 0 0
  • 01. 回忆那年,我在山区小学教书的时候,条件很苦,环境很差,但是依然是每天快乐的,我快乐的教书,快乐的和孩子们相...
    Jasmin萱阅读 602评论 0 3

友情链接更多精彩内容