1.竖向滚动

wxml文件

<!--pages/list/index.wxml--><scroll-view class="container1" scroll-y><view>A</view><view>B</view><view>C</view></scroll-view>

wxss文件

/* pages/list/index.wxss */.container1 view{display: inline-block;width:100px;height:100px;text-align: center;line-height: 100px;}.container1 view:nth-child(1){background-color: lightblue;}.container1 view:nth-child(2){background-color: lightcoral;}.container1 view:nth-child(3){background-color: lightgreen;}.container1{border: 1px solid red;width: 100px;height: 120px;}

2.横向滚动

wxml文件

<!--pages/list/index.wxml--><scroll-view class="container1" scroll-x><view>A</view><view>B</view><view>C</view></scroll-view>

wxss文件

/* pages/list/index.wxss */.container1 view{display: inline-block;width:100px;height:100px;text-align: center;line-height: 100px;}.container1 view:nth-child(1){background-color: lightblue;}.container1 view:nth-child(2){background-color: lightcoral;}.container1 view:nth-child(3){background-color: lightgreen;}.container1{display: flex;justify-content: space-around;white-space:nowrap;border: 1px solid red;width: 120px;height: 100px;}

注意事项：

1、在scroll-view标签上加上样式属性：display:flex;white-space:nowrap；

2、scroll-view标签下的一级栏目标签需要加上样式属性：display: inline-block;

只有结合上面两步，才能实现横向滚动。