指示器增加点击切换功能

Author: 李钿

src/components/ListContainer.jsx

@@ -40,7 +40,17 @@ class ListContainer extends PureComponent {
     this.setState({
       left: - this.perDistance * index,
     });
-  }  
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if(this.props.index !== nextProps.index){
+      this.isNeedSpring = true;
+      this.setState({
+        left: - this.perDistance * nextProps.index,
+      });
+    }
+  }
+  
   /**
    * 拖拽的缓动公式 - easeOutSine
    * Link http://easings.net/zh-cn#

src/components/Pointer.jsx

@@ -5,21 +5,24 @@ class Pointer extends PureComponent {
   static propTypes = {
     length: PropTypes.number.isRequired,
     index: PropTypes.number.isRequired,
+    changeIndex: PropTypes.func
   }
 
   render() {
     console.info("Point render")
 
     const {
       length,
+      changeIndex,
       index
     } = this.props
+
     let i = 0, items = [];
     for(i; i < length; i++){
       if(i === index){
-        items.push(<span key={i} className="pointer on"></span>);
+        items.push(<span onClick={changeIndex.bind(null, i)} key={i} className="pointer on"></span>);
       } else{
-        items.push(<span key={i} className="pointer"></span>);
+        items.push(<span onClick={changeIndex.bind(null, i)} key={i} className="pointer"></span>);
       }
     }
 

src/components/WrapViewer.jsx

@@ -66,7 +66,7 @@ class WrapViewer extends Component {
           urls={urls}
           gap={gap}
           index={index}/>
-        <Pointer length={urls.length} index={index}/>
+        <Pointer length={urls.length} index={index} changeIndex={this.changeIndex}/>
       </div>
     );
   }