前言

本篇我們的要學習的內容如下：

• 組件ScrollView
• 使用ScrollView實現輪播圖

一、組件ScrollView

• ScrollView是一個通用的可滾動的容器，你可以在其中放入多個組件和視圖，而且這些組件并不需要是同類型的。ScrollView不僅可以垂直滾動，還能水平滾動

• app上的輪播圖和引導頁，都可以使用ScrollView來完成

• ScrollView中常用的屬性

  1. horizontal

     當次屬性為true的時候，所有的子視圖會在水平方向上排成一行
     

  2. pagingEnabled：

     當值為true時，滾動條會停在滾動視圖的尺寸的整數倍位置。這個可以用在水平分頁上。默認值為false
     

  3. scrollsToTop：

     當此值為true時，點擊狀態欄的時候視圖會滾動到頂部。默認值為true
     

  4. showsHorizontalScrollIndicator bool

      true: 顯示一個水平方向的滾動條。
     

  5. showsVerticalScrollIndicator bool

      true: 顯示一個垂直方向的滾動條。
     

  6. keyboardDismissMode

     用戶拖拽滾動視圖時，是否要隱藏軟鍵盤
     
     none: 拖拽時不隱藏軟鍵盤
     
     on-drag: 當拖拽開始的時候隱藏軟鍵盤
     

  7. keyboardShouldPersistTaps

     "never": 在軟鍵盤激活之后，點擊scroll中焦點文本輸入框以外的ScrollView的地方，鍵盤就會隱藏
     
     "always": 滾動視圖不會響應點擊操作，并且鍵盤不會自動消失，這是默認值
     

  8. contentOffset.x;

      獲取到scrollView的偏移量
     

  9. contentContainerStyle

     這些樣式會應用到一個內容容器上，所有的子視圖都會包裹在內容容器里
     

  10. refreshControl：element

      指定RefreshControl組件，用于為ScrollView提供下拉刷新功能
      

  11. removeClippedSubviews:

      true: 當此屬性為true時，屏幕之外的子視圖(子視圖overflow樣式需要設為hidden)會被移除，這個可以提升大列表的滾動性能，默認值為true
      

• ScrollView中常見的方法

  1. onScroll

     在滾動過程中，每幀最多調用一次此回調函數，調用的頻率可以用scrollEventThrottle屬性來控制 
     

  2. onScrollBeginDrag

     當開始手動拖拽的時候調用
     

  3. onScrollEndDrag

     當結束手動拖拽的時候調用
     

  4. onMomentumScrollEnd

     當每一次滾動停止的時候調用
     

  5. scrollResponderScrollTo({x:currentX, y:0, animated:true});

     滾動到指定的x, y偏移處。第三個參數為是否啟用平滑滾動動畫
     

• 基本用法如下

二、輪播圖案例

• 導入計時器類庫

  1. 將命令行定位到當前你項目目錄

     cd xxx/demo2
     

  2. 導入計時器類庫，如果導入成功會在node_modules中生成一個react-timer-mixin

     npm i react-timer-mixin --save
     

  3. 將定時器類庫引入

     var TimerMixin = require('react-timer-mixin');
     

  4. 在組件中注冊定時器，在組件中注冊定時器,相當于給該組件設置了setInterval和clearInterval方法

     mixins: [TimerMixin]
     

  5. 開啟定時器,并返回定時器對象

     this.timer = this.setInterval(()=>{},1000)
     

  6. 銷毀定時器

     this.clearInterval(this.timer);
     

• 整體邏輯

  1. 定時進行滾動

  2. 小圓點做指示條

  3. 手指滾動，定時器停止

  4. 手指停止滾動，定時器開啟

  5. 效果

• 具體代碼及注釋