【scroll-view】 可滚动视图组件说明

scroll-view 可滚动视图容器

原型：

 1 <scroll-view  
 2   scroll-x="[Boolean]"
 3   scroll-y="[Boolean]"
 4   upper-threshold="[Number]"
 5   lower-threshold="[Number]"
 6   scroll-top="[Number]"
 7   scroll-left="[Number]"
 8   scroll-into-view="[String(其子元素ID名称字符串)]"
 9   scroll-with-animation="[Boolean]"
10   enable-back-to-top="[Boolean]"
11   bindscrolltoupper="[EventHandle]"
12   bindscrolltolower="[EventHandle]"
13   bindscroll="[EventHandle]"
14 >
15 </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名称。滚动到该对象处使其显示。
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 <view>属性: scroll-top、scroll-left演示</view>
 2 <scroll-view style="width:200px;height:200px;background:#f7f7f7;" 
 3              scroll-y
 4              scroll-x
 5              scroll-with-animation
 6              scroll-left="{{left}}" 
 7              scroll-top="{{top}}"             
 8              scroll-into-view="{{showId}}"
 9              enable-back-to-top="{{toTop}}"
10              >
11   <view style="width:300px;">项目1</view>
12   <view>项目2</view>
13   <view>项目3</view>
14   <view>项目4</view>
15   <view>项目5</view>
16   <view>项目6</view>
17   <view>项目7</view>
18   <view>项目8</view>
19   <view>项目9</view>
20   <view>项目10</view>
21   <view>项目11</view>
22   <view>项目12</view>
23   <view>项目13</view>
24   <view>项目14</view>
25   <view id="showIt" style="color:#f00">项目15</view>
26   <view>项目16</view>
27   <view>项目17</view>
28   <view>项目18</view>
29   <view>项目19</view>
30   <view>项目20</view>
31   <view>项目21</view>
32   <view>项目22</view>
33   <view>项目23</view>
34   <view>项目24</view>
35   <view>项目25</view>
36 </scroll-view>
37 
38 <button bind:tap="scrollToPos" >点我滚动到距左边100像素，距顶部100像素</button>
39 <button bind:tap="scrollToItem" >点我使"项目15"显示出来</button>

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 })