微信小程序之横向列表展示

csdn推荐

要实现微信小程序横向列表的滚动，可以使用scroll-view组件，将其中的scroll-x属性设置为true，即可实现横向滚动。下面是一个简单的例子：``` item1 item2 item3 item4 item5```需要注意的是，scroll-view组件需要设置宽度和高度，以便显示内容。可以通过设置样式来实现：```.list { display: flex; flex-wrap: nowrap; width: 100%; overflow-x: auto; overflow-y: hidden; white-space: nowrap;}.item { width: 100px; height: 100px; margin-right: 20px; background-color: #ccc;}```以上样式中，将scroll-view的宽度设置为100%以占据父容器的全部宽度，同时通过设置overflow-x: auto来实现横向滚动。将item设置成100px的宽度，可以让每个列表项在同一行中显示，同时通过设置margin-right: 20px来保证列表项之间有一定的间距。

文章来源:https://blog.csdn.net/qq_39772439/article/details/139828533