欢迎光临,了解微信小程序开发,就上易用通!

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

发布:2018-02-02 10:24浏览: 来源:网络 作者:cola

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中设置了4个view,这里绑定了,scroll-view滚动到顶部(垂直布局)bindscrolltoupper方法,并设置了scroll-y的值为true。表示允许纵向滚动。

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

使用竖向滚动时,需要给一个固定高度,通过 WXSS 设置 height。

 

				
  1. .contentScroll{
  2.  
  3. width: 100%;
  4.  
  5. height: 500rpx;
  6.  
  7. background-color: yellow;
  8.  
  9. }
  10.  
  11. .view1{
  12.  
  13. width: 100%;
  14.  
  15. height: 300rpx;
  16.  
  17. background-color: red;
  18.  
  19. }
  20.  
  21. .view2{
  22.  
  23. width: 100%;
  24.  
  25. height: 300rpx;
  26.  
  27. background-color: greenyellow;
  28.  
  29. }
  30.  
  31. .view3{
  32.  
  33. width: 100%;
  34.  
  35. height: 300rpx;
  36.  
  37. background-color: cadetblue;
  38.  
  39. }
  40.  
  41. .view4{
  42.  
  43. width: 100%;
  44.  
  45. height: 300rpx;
  46.  
  47. background-color: yellow;
  48.  
  49. }
  50.  
  51. 在.js文件中执行changeP方法
  52.  
  53. changeP:function (){
  54.  
  55. console.log("到顶部了");
  56.  
  57. }

页面显示的效果:

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






免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。