scroll-view 可滚动视图容器

原型：

1 
     
      15 
     

 

属性：

属性	是否必需	类型	默认值	说明
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名称。滚动到该对象处使其显示。
scroll-with-animation	否	Boolean	false	值为true时，滚动时使用动画过渡（通过js控制属性scroll-left值时会看到效果，手动滚动无效果）。
enable-back-to-top	否	Boolean	false	iOS点击顶部状态栏(位于标题栏上方)、安卓双击标题栏时，滚动条返回顶部，只支持竖向
bindscrolltoupper	否	EventHandle		滚动到顶部/左边时触发
bindscrolltolower	否	EventHandle		滚动到底部/右边时触发
bindscroll	否	EventHandle		滚动时触发

 

注意：

1) 请勿在 scroll-view 中使用 textarea、map、canvas、video 组件

2) scroll-into-view 的优先级高于 scroll-top

3) 在滚动 scroll-view 时会阻止页面回弹，所以在 scroll-view 中滚动，是无法触发 onPullDownRefresh

4) 若要使用下拉刷新，请使用页面的滚动，而不是 scroll-view ，这样也能通过点击顶部状态栏回到页面顶部

 

 当开启了动画滚动(scroll-with-animation)，且js代码中同时更改scroll-x与scroll-y时，只有最后设置的有效，测试代码如下：

index.wxml

1 
     
      属性: scroll-top、scroll-left演示
      2 
     
      11   
      
       项目1
      12   
      
       项目2
      13   
      
       项目3
      14   
      
       项目4
      15   
      
       项目5
      16   
      
       项目6
      17   
      
       项目7
      18   
      
       项目8
      19   
      
       项目9
      20   
      
       项目10
      21   
      
       项目11
      22   
      
       项目12
      23   
      
       项目13
      24   
      
       项目14
      25   
      
       项目15
      26   
      
       项目16
      27   
      
       项目17
      28   
      
       项目18
      29   
      
       项目19
      30   
      
       项目20
      31   
      
       项目21
      32   
      
       项目22
      33   
      
       项目23
      34   
      
       项目24
      35   
      
       项目25
      36 
     37 38 点我滚动到距左边100像素，距顶部100像素39 点我使"项目15"显示出来

index,js

1 //index.js 2 Page({ 3   data: { 4     left: 0, 5     top: 0, 6     showId : '', 7     animation: true, 8     toTop: true 9   },10 11   //事件处理函数12   scrollToPos: function(){    13     this.setData({ // 这里同时更改scroll-x与scroll-y，只有最后一项生效（top），因为第二个top动画阻止了第一个left的动画。除非top已在100位置时，left动画才会生效（即第二次点击时左侧会到100像素）14       left: 100,15       top: 100 16     }); 17   },18 19   scrollToItem: function(){    20       this.setData({21         showId: 'showIt'22       });23     }24  25 })