>[success] # scroll-view -- 滚动容器 1. 可滚动视图区域。使用竖向滚动时，需要给[scroll-view](https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html)一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px 2. `scroll-y` 上下滚动 ，`scroll-x` 左右滚动 3. 垂直方向滚动必须设置`scroll-view`一个高度 >[info] ## 左右滚动  ~~~html <!-- 上下滚动(y轴) --> <scroll-view class="container" scroll-y> <block wx:for="{{viewColors}}" wx:key="*this"> <view class="item" style="background: {{item}};">{{item}}</view> </block> </scroll-view> <!-- 左右滚动(x轴) --> <scroll-view class="container scroll-x" scroll-x enable-flex > <block wx:for="{{viewColors}}" wx:key="*this"> <view class="item1" style="background: {{item}};">{{item}}</view> </block> </scroll-view> ~~~ * index.wxss ~~~ .container { height: 100px; background-color: orange; } .item { width: 100px; height: 100px; color:red } .scroll-x { display: flex; } .item1{ width: 100px; height: 100px; color:red ; flex-shrink: 0; } ~~~ * index.js ~~~ Page({ data: { viewColors: ["red", "blue", "green", "skyblue", "purple", "yellow"] }, }) ~~~ >[danger] ##### 绑定监听事件 ~~~html <!-- 监听事件 --> <scroll-view class="container scroll-x" scroll-x enable-flex bindscrolltoupper="onScrollToUpper" bindscrolltolower="onScrollToLower" bindscroll="onScroll" > <block wx:for="{{viewColors}}" wx:key="*this"> <view class="item" style="background: {{item}};">{{item}}</view> </block> </scroll-view> ~~~ ~~~ page({ // 监听scroll-view滚动 onScrollToUpper() { console.log("滚动到最顶部/左边"); }, onScrollToLower() { console.log("滚到到最底部/右边"); }, onScroll(event) { console.log("scrollview发生了滚动:", event); } }) ~~~