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