{"remainingRequest":"/Users/linhuakun/Downloads/coderlhk/big bar/bigbar-start/node_modules/vue-loader/lib/index.js??vue-loader-options!/Users/linhuakun/Downloads/coderlhk/big bar/bigbar-start/src/components/common/swiper/Swiper.vue?vue&type=script&lang=js&","dependencies":[{"path":"/Users/linhuakun/Downloads/coderlhk/big bar/bigbar-start/src/components/common/swiper/Swiper.vue","mtime":1618202277715},{"path":"/Users/linhuakun/Downloads/coderlhk/big bar/bigbar-start/node_modules/babel-loader/lib/index.js","mtime":499162500000},{"path":"/Users/linhuakun/Downloads/coderlhk/big bar/bigbar-start/node_modules/cache-loader/dist/cjs.js","mtime":499162500000},{"path":"/Users/linhuakun/Downloads/coderlhk/big bar/bigbar-start/node_modules/vue-loader/lib/index.js","mtime":499162500000}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:Ly8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KCglleHBvcnQgZGVmYXVsdCB7CgkJbmFtZTogIlN3aXBlciIsCiAgICBwcm9wczogewogICAgICBpbnRlcnZhbDogewoJCSAgICB0eXBlOiBOdW1iZXIsCiAgICAgICAgZGVmYXVsdDogMzAwMAogICAgICB9LAogICAgICBhbmltRHVyYXRpb246IHsKCQkgICAgdHlwZTogTnVtYmVyLAogICAgICAgIGRlZmF1bHQ6IDMwMAogICAgICB9LAogICAgICBtb3ZlUmF0aW86IHsKICAgICAgICB0eXBlOiBOdW1iZXIsCiAgICAgICAgZGVmYXVsdDogMC4yCiAgICAgIH0sCiAgICAgIHNob3dJbmRpY2F0b3I6IHsKICAgICAgICB0eXBlOiBCb29sZWFuLAogICAgICAgIGRlZmF1bHQ6IHRydWUKICAgICAgfQogICAgfSwKICAgIGRhdGE6IGZ1bmN0aW9uICgpIHsKCQkgIHJldHVybiB7CiAgICAgICAgc2xpZGVDb3VudDogMCwgLy8g5YWD57Sg5Liq5pWwCiAgICAgICAgdG90YWxXaWR0aDogMCwgLy8gc3dpcGVy55qE5a695bqmCiAgICAgICAgc3dpcGVyU3R5bGU6IHt9LCAvLyBzd2lwZXLmoLflvI8KICAgICAgICBjdXJyZW50SW5kZXg6IDEsIC8vIOW9k+WJjeeahGluZGV4CiAgICAgICAgc2Nyb2xsaW5nOiBmYWxzZSwgLy8g5piv5ZCm5q2j5Zyo5rua5YqoCiAgICAgIH0KICAgIH0sCiAgICBtb3VudGVkOiBmdW5jdGlvbiAoKSB7CiAgICAgIC8vIDEu5pON5L2cRE9NLCDlnKjliY3lkI7mt7vliqBTbGlkZQogICAgICBzZXRUaW1lb3V0KCgpID0+IHsKICAgICAgICB0aGlzLmhhbmRsZURvbSgpOwogICAgICAgIC8vIDIu5byA5ZCv5a6a5pe25ZmoCiAgICAgICAgdGhpcy5zdGFydFRpbWVyKCk7CiAgICAgIH0sIDUwMCkKICAgIH0sCiAgICBtZXRob2RzOiB7CgkJICAvKioKICAgICAgICog5a6a5pe25Zmo5pON5L2cCiAgICAgICAqLwogICAgICBzdGFydFRpbWVyOiBmdW5jdGlvbiAoKSB7CgkJICAgIHRoaXMucGxheVRpbWVyID0gd2luZG93LnNldEludGVydmFsKCgpID0+IHsKCQkgICAgICB0aGlzLmN1cnJlbnRJbmRleCsrOwoJCSAgICAgIHRoaXMuc2Nyb2xsQ29udGVudCgtdGhpcy5jdXJyZW50SW5kZXggKiB0aGlzLnRvdGFsV2lkdGgpOwogICAgICAgIH0sIHRoaXMuaW50ZXJ2YWwpCiAgICAgIH0sCiAgICAgIHN0b3BUaW1lcjogZnVuY3Rpb24gKCkgewogICAgICAgIHdpbmRvdy5jbGVhckludGVydmFsKHRoaXMucGxheVRpbWVyKTsKICAgICAgfSwKCiAgICAgIC8qKgogICAgICAgKiDmu5rliqjliLDmraPnoa7nmoTkvY3nva4KICAgICAgICovCiAgICAgIHNjcm9sbENvbnRlbnQ6IGZ1bmN0aW9uIChjdXJyZW50UG9zaXRpb24pIHsKICAgICAgICAvLyAwLuiuvue9ruato+WcqOa7muWKqAogICAgICAgIHRoaXMuc2Nyb2xsaW5nID0gdHJ1ZTsKCiAgICAgICAgLy8gMS7lvIDlp4vmu5rliqjliqjnlLsKICAgICAgICB0aGlzLnN3aXBlclN0eWxlLnRyYW5zaXRpb24gPSd0cmFuc2Zvcm0gJysgdGhpcy5hbmltRHVyYXRpb24gKyAnbXMnOwogICAgICAgIHRoaXMuc2V0VHJhbnNmb3JtKGN1cnJlbnRQb3NpdGlvbik7CgogICAgICAgIC8vIDIu5Yik5pat5rua5Yqo5Yiw55qE5L2N572uCiAgICAgICAgdGhpcy5jaGVja1Bvc2l0aW9uKCk7CgogICAgICAgIC8vIDQu5rua5Yqo5a6M5oiQCiAgICAgICAgdGhpcy5zY3JvbGxpbmcgPSBmYWxzZQogICAgICB9LAoKICAgICAgLyoqCiAgICAgICAqIOagoemqjOato+ehrueahOS9jee9rgogICAgICAgKi8KICAgICAgY2hlY2tQb3NpdGlvbjogZnVuY3Rpb24gKCkgewogICAgICAgIHdpbmRvdy5zZXRUaW1lb3V0KCgpID0+IHsKICAgICAgICAgIC8vIDEu5qCh6aqM5q2j56Gu55qE5L2N572uCiAgICAgICAgICB0aGlzLnN3aXBlclN0eWxlLnRyYW5zaXRpb24gPSAnMG1zJzsKICAgICAgICAgIGlmICh0aGlzLmN1cnJlbnRJbmRleCA+PSB0aGlzLnNsaWRlQ291bnQgKyAxKSB7CiAgICAgICAgICAgIHRoaXMuY3VycmVudEluZGV4ID0gMTsKICAgICAgICAgICAgdGhpcy5zZXRUcmFuc2Zvcm0oLXRoaXMuY3VycmVudEluZGV4ICogdGhpcy50b3RhbFdpZHRoKTsKICAgICAgICAgIH0gZWxzZSBpZiAodGhpcy5jdXJyZW50SW5kZXggPD0gMCkgewogICAgICAgICAgICB0aGlzLmN1cnJlbnRJbmRleCA9IHRoaXMuc2xpZGVDb3VudDsKICAgICAgICAgICAgdGhpcy5zZXRUcmFuc2Zvcm0oLXRoaXMuY3VycmVudEluZGV4ICogdGhpcy50b3RhbFdpZHRoKTsKICAgICAgICAgIH0KCiAgICAgICAgICAvLyAyLue7k+adn+enu+WKqOWQjueahOWbnuiwgwogICAgICAgICAgdGhpcy4kZW1pdCgndHJhbnNpdGlvbkVuZCcsIHRoaXMuY3VycmVudEluZGV4LTEpOwogICAgICAgIH0sIHRoaXMuYW5pbUR1cmF0aW9uKQogICAgICB9LAoKICAgICAgLyoqCiAgICAgICAqIOiuvue9rua7muWKqOeahOS9jee9rgogICAgICAgKi8KICAgICAgc2V0VHJhbnNmb3JtOiBmdW5jdGlvbiAocG9zaXRpb24pIHsKICAgICAgICB0aGlzLnN3aXBlclN0eWxlLnRyYW5zZm9ybSA9IGB0cmFuc2xhdGUzZCgke3Bvc2l0aW9ufXB4LCAwLCAwKWA7CiAgICAgICAgdGhpcy5zd2lwZXJTdHlsZVsnLXdlYmtpdC10cmFuc2Zvcm0nXSA9IGB0cmFuc2xhdGUzZCgke3Bvc2l0aW9ufXB4KSwgMCwgMGA7CiAgICAgICAgdGhpcy5zd2lwZXJTdHlsZVsnLW1zLXRyYW5zZm9ybSddID0gYHRyYW5zbGF0ZTNkKCR7cG9zaXRpb259cHgpLCAwLCAwYDsKICAgICAgfSwKCiAgICAgIC8qKgogICAgICAgKiDmk43kvZxET00sIOWcqERPTeWJjeWQjua3u+WKoFNsaWRlCiAgICAgICAqLwoJCSAgaGFuZGxlRG9tOiBmdW5jdGlvbiAoKSB7CiAgICAgICAgLy8gMS7ojrflj5bopoHmk43kvZznmoTlhYPntKAKICAgICAgICBsZXQgc3dpcGVyRWwgPSBkb2N1bWVudC5xdWVyeVNlbGVjdG9yKCcuc3dpcGVyJyk7CiAgICAgICAgbGV0IHNsaWRlc0VscyA9IHN3aXBlckVsJiZzd2lwZXJFbC5nZXRFbGVtZW50c0J5Q2xhc3NOYW1lKCdzbGlkZScpOwogICAgICAgIC8vIDIu5L+d5a2Y5Liq5pWwCiAgICAgICAgdGhpcy5zbGlkZUNvdW50ID0gc2xpZGVzRWxzJiZzbGlkZXNFbHMubGVuZ3RoOwoKICAgICAgICAvLyAzLuWmguaenOWkp+S6jjHkuKosIOmCo+S5iOWcqOWJjeWQjuWIhuWIq+a3u+WKoOS4gOS4qnNsaWRlCiAgICAgICAgaWYgKHRoaXMuc2xpZGVDb3VudCA+IDEpIHsKICAgICAgICAgIGxldCBjbG9uZUZpcnN0ID0gc2xpZGVzRWxzWzBdLmNsb25lTm9kZSh0cnVlKTsKICAgICAgICAgIGxldCBjbG9uZUxhc3QgPSBzbGlkZXNFbHNbdGhpcy5zbGlkZUNvdW50IC0gMV0uY2xvbmVOb2RlKHRydWUpOwogICAgICAgICAgc3dpcGVyRWwuaW5zZXJ0QmVmb3JlKGNsb25lTGFzdCwgc2xpZGVzRWxzWzBdKTsKICAgICAgICAgIHN3aXBlckVsLmFwcGVuZENoaWxkKGNsb25lRmlyc3QpOwogICAgICAgICAgdGhpcy50b3RhbFdpZHRoID0gc3dpcGVyRWwub2Zmc2V0V2lkdGg7CiAgICAgICAgICB0aGlzLnN3aXBlclN0eWxlID0gc3dpcGVyRWwuc3R5bGU7CiAgICAgICAgfQoKICAgICAgICAvLyA0LuiuqXN3aXBlcuWFg+e0oCwg5pi+56S656ys5LiA5LiqKOebruWJjeaYr+aYvuekuuWJjemdoua3u+WKoOeahOacgOWQjuS4gOS4quWFg+e0oCkKICAgICAgICB0aGlzLnNldFRyYW5zZm9ybSgtdGhpcy50b3RhbFdpZHRoKTsKICAgICAgfSwKCiAgICAgIC8qKgogICAgICAgKiDmi5bliqjkuovku7bnmoTlpITnkIYKICAgICAgICovCiAgICAgIHRvdWNoU3RhcnQ6IGZ1bmN0aW9uIChlKSB7CiAgICAgICAgLy8gMS7lpoLmnpzmraPlnKjmu5rliqgsIOS4jeWPr+S7peaLluWKqAogICAgICAgIGlmICh0aGlzLnNjcm9sbGluZykgcmV0dXJuOwoKICAgICAgICAvLyAyLuWBnOatouWumuaXtuWZqAogICAgICAgIHRoaXMuc3RvcFRpbWVyKCk7CgogICAgICAgIC8vIDMu5L+d5a2Y5byA5aeL5rua5Yqo55qE5L2N572uCiAgICAgICAgdGhpcy5zdGFydFggPSBlLnRvdWNoZXNbMF0ucGFnZVg7CiAgICAgIH0sCgogICAgICB0b3VjaE1vdmU6IGZ1bmN0aW9uIChlKSB7CiAgICAgICAgLy8gMS7orqHnrpflh7rnlKjmiLfmi5bliqjnmoTot53nprsKICAgICAgICB0aGlzLmN1cnJlbnRYID0gZS50b3VjaGVzWzBdLnBhZ2VYOwogICAgICAgIHRoaXMuZGlzdGFuY2UgPSB0aGlzLmN1cnJlbnRYIC0gdGhpcy5zdGFydFg7CiAgICAgICAgbGV0IGN1cnJlbnRQb3NpdGlvbiA9IC10aGlzLmN1cnJlbnRJbmRleCAqIHRoaXMudG90YWxXaWR0aDsKICAgICAgICBsZXQgbW92ZURpc3RhbmNlID0gdGhpcy5kaXN0YW5jZSArIGN1cnJlbnRQb3NpdGlvbjsKCiAgICAgICAgLy8gMi7orr7nva7lvZPliY3nmoTkvY3nva4KICAgICAgICB0aGlzLnNldFRyYW5zZm9ybShtb3ZlRGlzdGFuY2UpOwogICAgICB9LAoKICAgICAgdG91Y2hFbmQ6IGZ1bmN0aW9uIChlKSB7CgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKICAgICAgICAvLyAxLuiOt+WPluenu+WKqOeahOi3neemuwogICAgICAgIGxldCBjdXJyZW50TW92ZSA9IE1hdGguYWJzKHRoaXMuZGlzdGFuY2UpOwoKICAgICAgICAvLyAyLuWIpOaWreacgOe7iOeahOi3neemuwogICAgICAgIGlmICh0aGlzLmRpc3RhbmNlID09PSAwKSB7CiAgICAgICAgICByZXR1cm4KICAgICAgICB9IGVsc2UgaWYgKHRoaXMuZGlzdGFuY2UgPiAwICYmIGN1cnJlbnRNb3ZlID4gdGhpcy50b3RhbFdpZHRoICogdGhpcy5tb3ZlUmF0aW8pIHsgLy8g5Y+z6L6556e75Yqo6LaF6L+HMC41CiAgICAgICAgICB0aGlzLmN1cnJlbnRJbmRleC0tCiAgICAgICAgfSBlbHNlIGlmICh0aGlzLmRpc3RhbmNlIDwgMCAmJiBjdXJyZW50TW92ZSA+IHRoaXMudG90YWxXaWR0aCAqIHRoaXMubW92ZVJhdGlvKSB7IC8vIOWQkeW3puenu+WKqOi2hei/hzAuNQogICAgICAgICAgdGhpcy5jdXJyZW50SW5kZXgrKwogICAgICAgIH0KCiAgICAgICAgLy8gMy7np7vliqjliLDmraPnoa7nmoTkvY3nva4KICAgICAgICB0aGlzLnNjcm9sbENvbnRlbnQoLXRoaXMuY3VycmVudEluZGV4ICogdGhpcy50b3RhbFdpZHRoKTsKCiAgICAgICAgLy8gNC7np7vliqjlrozmiJDlkI7ph43mlrDlvIDlkK/lrprml7blmagKICAgICAgICB0aGlzLnN0YXJ0VGltZXIoKTsKICAgICAgfSwKCiAgICAgIC8qKgogICAgICAgKiDmjqfliLbkuIrkuIDkuKosIOS4i+S4gOS4qgogICAgICAgKi8KICAgICAgcHJldmlvdXM6IGZ1bmN0aW9uICgpIHsKICAgICAgICB0aGlzLmNoYW5nZUl0ZW0oLTEpOwogICAgICB9LAoKICAgICAgbmV4dDogZnVuY3Rpb24gKCkgewogICAgICAgIHRoaXMuY2hhbmdlSXRlbSgxKTsKICAgICAgfSwKCiAgICAgIGNoYW5nZUl0ZW06IGZ1bmN0aW9uIChudW0pIHsKICAgICAgICAvLyAxLuenu+mZpOWumuaXtuWZqAogICAgICAgIHRoaXMuc3RvcFRpbWVyKCk7CgogICAgICAgIC8vIDIu5L+u5pS5aW5kZXjlkozkvY3nva4KICAgICAgICB0aGlzLmN1cnJlbnRJbmRleCArPSBudW07CiAgICAgICAgdGhpcy5zY3JvbGxDb250ZW50KC10aGlzLmN1cnJlbnRJbmRleCAqIHRoaXMudG90YWxXaWR0aCk7CgogICAgICAgIC8vIDMu5re75Yqg5a6a5pe25ZmoCiAgICAgICAgdGhpcy5zdGFydFRpbWVyKCk7CiAgICAgIH0KICAgIH0KCX0K"},{"version":3,"sources":["Swiper.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAgBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiIA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA","file":"Swiper.vue","sourceRoot":"src/components/common/swiper","sourcesContent":["<template>\n    <div id=\"hy-swiper\">\n      <div class=\"swiper\" @touchstart=\"touchStart\" @touchmove=\"touchMove\" @touchend=\"touchEnd\">\n        <slot></slot>\n      </div>\n      <slot name=\"indicator\">\n      </slot>\n      <div class=\"indicator\">\n        <slot name=\"indicator\" v-if=\"showIndicator && slideCount>1\">\n          <div v-for=\"(item, index) in slideCount\" class=\"indi-item\" :class=\"{active: index === currentIndex-1}\" :key=\"index\"></div>\n        </slot>\n      </div>\n    </div>\n</template>\n\n<script>\n\texport default {\n\t\tname: \"Swiper\",\n    props: {\n      interval: {\n\t\t    type: Number,\n        default: 3000\n      },\n      animDuration: {\n\t\t    type: Number,\n        default: 300\n      },\n      moveRatio: {\n        type: Number,\n        default: 0.2\n      },\n      showIndicator: {\n        type: Boolean,\n        default: true\n      }\n    },\n    data: function () {\n\t\t  return {\n        slideCount: 0, // 元素个数\n        totalWidth: 0, // swiper的宽度\n        swiperStyle: {}, // swiper样式\n        currentIndex: 1, // 当前的index\n        scrolling: false, // 是否正在滚动\n      }\n    },\n    mounted: function () {\n      // 1.操作DOM, 在前后添加Slide\n      setTimeout(() => {\n        this.handleDom();\n        // 2.开启定时器\n        this.startTimer();\n      }, 500)\n    },\n    methods: {\n\t\t  /**\n       * 定时器操作\n       */\n      startTimer: function () {\n\t\t    this.playTimer = window.setInterval(() => {\n\t\t      this.currentIndex++;\n\t\t      this.scrollContent(-this.currentIndex * this.totalWidth);\n        }, this.interval)\n      },\n      stopTimer: function () {\n        window.clearInterval(this.playTimer);\n      },\n\n      /**\n       * 滚动到正确的位置\n       */\n      scrollContent: function (currentPosition) {\n        // 0.设置正在滚动\n        this.scrolling = true;\n\n        // 1.开始滚动动画\n        this.swiperStyle.transition ='transform '+ this.animDuration + 'ms';\n        this.setTransform(currentPosition);\n\n        // 2.判断滚动到的位置\n        this.checkPosition();\n\n        // 4.滚动完成\n        this.scrolling = false\n      },\n\n      /**\n       * 校验正确的位置\n       */\n      checkPosition: function () {\n        window.setTimeout(() => {\n          // 1.校验正确的位置\n          this.swiperStyle.transition = '0ms';\n          if (this.currentIndex >= this.slideCount + 1) {\n            this.currentIndex = 1;\n            this.setTransform(-this.currentIndex * this.totalWidth);\n          } else if (this.currentIndex <= 0) {\n            this.currentIndex = this.slideCount;\n            this.setTransform(-this.currentIndex * this.totalWidth);\n          }\n\n          // 2.结束移动后的回调\n          this.$emit('transitionEnd', this.currentIndex-1);\n        }, this.animDuration)\n      },\n\n      /**\n       * 设置滚动的位置\n       */\n      setTransform: function (position) {\n        this.swiperStyle.transform = `translate3d(${position}px, 0, 0)`;\n        this.swiperStyle['-webkit-transform'] = `translate3d(${position}px), 0, 0`;\n        this.swiperStyle['-ms-transform'] = `translate3d(${position}px), 0, 0`;\n      },\n\n      /**\n       * 操作DOM, 在DOM前后添加Slide\n       */\n\t\t  handleDom: function () {\n        // 1.获取要操作的元素\n        let swiperEl = document.querySelector('.swiper');\n        let slidesEls = swiperEl&&swiperEl.getElementsByClassName('slide');\n        // 2.保存个数\n        this.slideCount = slidesEls&&slidesEls.length;\n\n        // 3.如果大于1个, 那么在前后分别添加一个slide\n        if (this.slideCount > 1) {\n          let cloneFirst = slidesEls[0].cloneNode(true);\n          let cloneLast = slidesEls[this.slideCount - 1].cloneNode(true);\n          swiperEl.insertBefore(cloneLast, slidesEls[0]);\n          swiperEl.appendChild(cloneFirst);\n          this.totalWidth = swiperEl.offsetWidth;\n          this.swiperStyle = swiperEl.style;\n        }\n\n        // 4.让swiper元素, 显示第一个(目前是显示前面添加的最后一个元素)\n        this.setTransform(-this.totalWidth);\n      },\n\n      /**\n       * 拖动事件的处理\n       */\n      touchStart: function (e) {\n        // 1.如果正在滚动, 不可以拖动\n        if (this.scrolling) return;\n\n        // 2.停止定时器\n        this.stopTimer();\n\n        // 3.保存开始滚动的位置\n        this.startX = e.touches[0].pageX;\n      },\n\n      touchMove: function (e) {\n        // 1.计算出用户拖动的距离\n        this.currentX = e.touches[0].pageX;\n        this.distance = this.currentX - this.startX;\n        let currentPosition = -this.currentIndex * this.totalWidth;\n        let moveDistance = this.distance + currentPosition;\n\n        // 2.设置当前的位置\n        this.setTransform(moveDistance);\n      },\n\n      touchEnd: function (e) {\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n        // 1.获取移动的距离\n        let currentMove = Math.abs(this.distance);\n\n        // 2.判断最终的距离\n        if (this.distance === 0) {\n          return\n        } else if (this.distance > 0 && currentMove > this.totalWidth * this.moveRatio) { // 右边移动超过0.5\n          this.currentIndex--\n        } else if (this.distance < 0 && currentMove > this.totalWidth * this.moveRatio) { // 向左移动超过0.5\n          this.currentIndex++\n        }\n\n        // 3.移动到正确的位置\n        this.scrollContent(-this.currentIndex * this.totalWidth);\n\n        // 4.移动完成后重新开启定时器\n        this.startTimer();\n      },\n\n      /**\n       * 控制上一个, 下一个\n       */\n      previous: function () {\n        this.changeItem(-1);\n      },\n\n      next: function () {\n        this.changeItem(1);\n      },\n\n      changeItem: function (num) {\n        // 1.移除定时器\n        this.stopTimer();\n\n        // 2.修改index和位置\n        this.currentIndex += num;\n        this.scrollContent(-this.currentIndex * this.totalWidth);\n\n        // 3.添加定时器\n        this.startTimer();\n      }\n    }\n\t}\n</script>\n\n<style scoped>\n  #hy-swiper {\n    overflow: hidden;\n    position: relative;\n  }\n\n  .swiper {\n    display: flex;\n  }\n\n  .indicator {\n    display: flex;\n    justify-content: center;\n    position: absolute;\n    width: 100%;\n    bottom: 8px;\n  }\n\n  .indi-item {\n    box-sizing: border-box;\n    width: 4px;\n    height: 4px;\n    border-radius: 4px;\n    background-color: #999;\n    line-height: 8px;\n    text-align: center;\n    font-size: 12px;\n    margin: 0 5px;\n  }\n\n  .indi-item.active {\n    background-color: rgba(212,62,46,1.0);\n  }\n</style>\n"]}]}