前言

本篇我们的要学习的内容如下：

• 组件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. 效果

• 具体代码及注释