微信小程序的视图容器-- scroll-view

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("到顶部了");

}

页面显示的效果:

页面可以纵向滚动，当滚动到最顶部时，在控制台会输出：到顶部了。