>[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); } }) ~~~