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

scroll-view:可滚动视图区域

 

属性名	类型	默认值	说明
scroll-x	Boolean	false	允许横向滚动
scroll-y	Boolean	false	允许纵向滚动
upper-threshold	Number	50	距顶部/左边多远时（单位px），触发 scrolltoupper 事件
lower-threshold	Number	50	距底部/右边多远时（单位px），触发 scrolltolower 事件
scroll-top	Number		设置竖向滚动条位置
scroll-left	Number		设置横向滚动条位置
scroll-into-view	String		值应为某子元素id，则滚动到该元素，元素顶部对齐滚动区域顶部
bindscrolltoupper	EventHandle		滚动到顶部/左边，会触发 scrolltoupper 事件
bindscrolltolower	EventHandle		滚动到底部/右边，会触发 scrolltolower 事件
bindscroll	EventHandle		滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

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

 <scroll-viewclass="contentScroll" scroll-y="true"bindscrolltoupper="changeP">

<view class="view1"></view>

<viewclass="view2"></view>

<viewclass="view3"></view>

<viewclass="view4"></view>

</scroll-view>

我们在scroll-view中设置了4个view，这里绑定了，scroll-view滚动到顶部（垂直布局）bindscrolltoupper方法，并设置了scroll-y的值为true。表示允许纵向滚动。

在对应.wxss文件中实现布局，这里我们实现scroll-view的竖直滚动

使用竖向滚动时，需要给<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("到顶部了");

    }

 

页面显示的效果:

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