在小程序中做一个横向滚动的视图,直接用 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;
}
网友评论