scroll-view:可滾動視圖區域

我們在.wxml文件中使用scroll-View

我們在scroll-view中設置了4個view，這里綁定了，scroll-view滾動到頂部（垂直布局）bindscrolltoupper方法，并設置了scroll-y的值為true。表示允許縱向滾動。在對應.wxss文件中實現布局，這里我們實現scroll-view的豎直滾動使用豎向滾動時，需要給一個固定高度，通過 WXSS 設置 height。

.contentScroll{

width: 100%;

height: 500rpx;

background-color: yellow;

}

.view1{

width: 100%;

height: 300rpx;

background-color: red;

}

.view2{

width: 100%;

height: 300rpx;

background-color: greenyellow;

}

.view3{

width: 100%;

height: 300rpx;

background-color: cadetblue;

}

.view4{

width: 100%;

height: 300rpx;

background-color: yellow;

}

在.js文件中執行changeP方法

changeP:function (){

console.log("到頂部了");

}

頁面顯示的效果:

頁面可以縱向滾動，當滾動到最頂部時，在控制臺會輸出：到頂部了。