美文网首页
scroll-view 横向滑动无效的问题

scroll-view 横向滑动无效的问题

作者: ChenME | 来源:发表于2018-07-17 14:33 被阅读192次

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

  • XML文件
<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;
}

仅仅上面这两段代码,你以为就能实现效果了吗?错了!根本不能滚动!!!
必须添加 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;
}

相关文章

网友评论

      本文标题:scroll-view 横向滑动无效的问题

      本文链接:https://www.haomeiwen.com/subject/dznwpftx.html