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("到顶部了");
}
页面显示的效果:
页面可以纵向滚动,当滚动到最顶部时,在控制台会输出:到顶部了。