增加 Pointer 组件

Author: 李钿

src/components/Pointer.jsx

@@ -2,10 +2,31 @@ import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 
 class Pointer extends PureComponent {
+  static propTypes = {
+    length: PropTypes.number.isRequired,
+    index: PropTypes.number.isRequired,
+  }
 
   render() {
+    console.info("Point render")
+    
+    const {
+      length,
+      index
+    } = this.props
+    let i = 0, items = [];
+    for(i; i < length; i++){
+      if(i === index){
+        items.push(<span key={i} className="pointer on"></span>);
+      } else{
+        items.push(<span key={i} className="pointer"></span>);
+      }
+    }
+
     return (
-      <div/>
+      <div className="viewer-image-pointer">
+        {items}
+      </div>
     );
   }
 }

src/components/WxImageViewer.less

@@ -36,4 +36,23 @@
       position: absolute;
     }
   }
+
+  .viewer-image-pointer{
+    position: fixed;
+    bottom: 10px;
+    left: 0;
+    width: 100%;
+    text-align: center;
+    .pointer{
+      display: inline-block;
+      width: 8px;
+      height: 8px;
+      margin: 0 5px;
+      border-radius: 100%;
+      background-color: #333;
+      &.on{
+        background-color: #fff;
+      }
+    }
+  }
 }