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

原创
2017/05/15 15:55
阅读数 346

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-view class="contentScroll" scroll-y="true" bindscrolltoupper="changeP">

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

<view class="view2"></view>

<view class="view3"></view>

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

    }

 

页面显示的效果:

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

 

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部