详细说明微信小程序滚动视图的灵活布�

至于微信小程序的滚动视图组件，第一次写的时候是在滚动视图中直接用一层容器包裹，然后用flex布局，通过组件水平滚动。后来有人提议。改进，但如果不录，几天后就会发现，会有点尴尬。

1.翻译

2.在滚动视图中添加一层容器，并使用flex布局来实现

如果您在这里使用flex布局，您应该使用组件形式的wxss文件。scrollView { padding: 0 20rpxwhite-space : nowrap；盒子尺寸：边框盒子；}.项{ display : inline-block；右边距： 20 rpx；width : calc(100%/3)；高度： 100 rpx；background : # ff 00 ff；} . scrollview1 { display : flex；边距-top : 40 rpx；padding: 0 20rpx宽度： 100%；flex-wrap : nowrap；盒子尺寸：边框盒子；} . item 1 { margin-right : 20 rpx；width : calc(100%/3)；高度： 100 rpx；background : # ff 00 ff；} . scrollview 2 { margin-top : 40 rpx；padding: 0 20rpx宽度： 100%；盒子尺寸：边框盒子；}.item container { display : flex；宽度： 100%；flex-wrap : nowrap；}.scrollItem { margin-right : 20 rpx；} . scrollview3 { margin-top : 40 rpx；padding: 0 20rpx宽度： 100%；盒子尺寸：边框盒子；} . item 3 { margin-right : 20 rpx；/* width : calc(100%/3)；*/width : 240 rpx；高度： 100 rpx；背景# aa22dd}wxml文件

！-如果要使用flex布局实现水平滚动，需要在scroll-view中增加一层容器包。而滚动效果只有使用子组件才会出现-scroll-view scroll-x class=' scroll view 2 ' view class=' item container ' block wx : for=' { { 4 } } ' wx : key=' { { index } }在' view-item class=' scroll item '/block/view/scroll-view子组件中只有一个view标签，可以自己直接写

3.直接使用display: inline-blockXML文件

scroll-view scroll-x class=' scroll view ' block wx : for=' { { 4 } } ' wx : key=' { { index } } ' view class=' item '/view/block/scroll-view 4。我自己的理解

滚动视图不能直接使用flex布局，因为它不会像预期的那样水平排列和滚动。如果直接使用flex layout，不使用子组件，就会被挤到一行以上，这就是本文的全部内容。希望对大家的学习有帮助，支持我们。