修正open函数的BUG

KyLeoHC · KyLeoHC · commit 90cc57c4dbc9 · 2017-01-25T11:23:38.000+08:00
diff --git a/README.md b/README.md
@@ -62,7 +62,7 @@ imageViewer.open();
 
 ## 内置API
 ImageViewer类的实例拥有以下可用的API函数：
-- `open`：初始化图片预览组件并且显示；
+- `open`：初始化图片预览组件并且显示，入参为想要展示的图片所在数组下标；
 - `close`：关闭图片预览组件；
 - `destroy`：销毁图片预览组件；
 - `setImageOption`：设置图片数据，第一个入参为图片数组，第二个入参为开始预览的第一张图片所在数组下标；
diff --git a/demo/index.html b/demo/index.html
@@ -7,8 +7,21 @@
     <style>
         html, body, .container {
             height: 100%;
+            margin: 0;
+            overflow-y: scroll;
+        }
+
+        .img-list {
+            padding: 10px;
+        }
+
+        .img-list p {
             overflow: hidden;
-            margin: 0px;
+        }
+
+        .img-list p img {
+            max-width: 100%;
+            max-height: 100%;
         }
 
         #close {
@@ -26,20 +39,23 @@
 </head>
 <body>
 <div class="container">
-    <h1>Hello, this is an image viewer.</h1>
-    <p id="open">打开</p>
+    <div class="img-list">
+        <p><img src="images/2.jpg" data-index="0"></p>
+        <p><img src="images/3.jpg" data-index="1"></p>
+        <p><img src="images/4.jpg" data-index="2"></p>
+        <p><img src="images/5.jpg" data-index="3"></p>
+        <p><img src="images/6.jpg" data-index="4"></p>
+        <p><img src="images/7.jpg" data-index="5"></p>
+        <p><img src="images/8.jpg" data-index="6"></p>
+    </div>
 </div>
 <script src="build/imageViewer.js"></script>
 <script type="text/javascript">
-    var images1 = ['images/2.jpg'];
-    var images2 = ['images/2.jpg', 'images/3.jpg'];
-    var images3 = ['images/2.jpg', 'images/3.jpg', 'images/4.jpg'];
     var images = ['images/2.jpg', 'images/3.jpg', 'images/4.jpg', 'images/5.jpg', 'images/6.jpg', 'images/7.jpg', 'images/8.jpg'];
-    var imageViewer = new ImageViewer(images3, {
+    var imageViewer = new ImageViewer(images, {
         container: 'body',
         enableScale: true,
         startIndex: 0,
-        loop: false,
         headerRender: function () {
             setTimeout(function () {
                 document.getElementById('close').addEventListener('click', function () {
@@ -73,8 +89,8 @@ <h1>Hello, this is an image viewer.</h1>
         }
     });
 
-    document.getElementById('open').addEventListener('click', function () {
-        imageViewer.open();
+    document.getElementsByClassName('img-list')[0].addEventListener('click', function (event) {
+        imageViewer.open(parseInt(event.target.getAttribute('data-index')));
     }, false);
 </script>
 </body>
diff --git a/src/core/imageViewer.js b/src/core/imageViewer.js
@@ -80,7 +80,6 @@ class ImageViewer {
             item = this.itemList[i];
             this.viewers.push(new Viewer(this, item, this.width, this.height, i));
         }
-        this.translateX = 0;
         this.swipeInByIndex(this.currentIndex);
         lock.createLock(LOCK_NAME);
     }
@@ -202,7 +201,8 @@ class ImageViewer {
      * 重置当前图片的缩放
      */
     reset() {
-        this.viewers[1].init(this.displayIndex, true, null, false);
+        let viewer = this.viewers[1];
+        viewer.init(viewer.displayIndex, true, null, false);
         setTimeout(() => {
             lock.releaseLock(LOCK_NAME);
         }, 0);
@@ -278,6 +278,7 @@ class ImageViewer {
     swipeInByIndex(index) {
         if (!isNaN(index) && -1 < index && index < this.imagesLength) {
             this.currentIndex = index;
+            this.translateX = 0;
             setTranslateStyle(this.bodyEl, 0, 0);
 
             this.viewers = this.viewers.sort(function (a, b) {
@@ -313,12 +314,15 @@ class ImageViewer {
         }
     }
 
-    open() {
+    open(index) {
+        this.currentIndex = index === undefined ? this.currentIndex : index;
         if (!this.el) {
             //仅仅实例化，但尚未初始化
             this._create();
             this._init();
             this._bindEvent();
+        } else {
+            this.swipeInByIndex(this.currentIndex);
         }
         this.el.style.display = 'block';
     }
