微信小程序的视图容器-- scroll-view
2017-05-15 本文已影响0人
博为峰51Code教研组
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("到顶部了");
}
页面显示的效果:
页面可以纵向滚动，当滚动到最顶部时，在控制台会输出：到顶部了。
