You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 line
16 KiB
1 line
16 KiB
{"remainingRequest":"/Users/linhuakun/Downloads/coderlhk/codewhy/node_modules/vue-loader/lib/index.js??vue-loader-options!/Users/linhuakun/Downloads/coderlhk/codewhy/src/components/common/swiper/Swiper.vue?vue&type=script&lang=js&","dependencies":[{"path":"/Users/linhuakun/Downloads/coderlhk/codewhy/src/components/common/swiper/Swiper.vue","mtime":1615815003911},{"path":"/Users/linhuakun/Downloads/coderlhk/codewhy/node_modules/cache-loader/dist/cjs.js","mtime":499162500000},{"path":"/Users/linhuakun/Downloads/coderlhk/codewhy/node_modules/thread-loader/dist/cjs.js","mtime":499162500000},{"path":"/Users/linhuakun/Downloads/coderlhk/codewhy/node_modules/babel-loader/lib/index.js","mtime":499162500000},{"path":"/Users/linhuakun/Downloads/coderlhk/codewhy/node_modules/cache-loader/dist/cjs.js","mtime":499162500000},{"path":"/Users/linhuakun/Downloads/coderlhk/codewhy/node_modules/vue-loader/lib/index.js","mtime":499162500000}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:Ly8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KCglleHBvcnQgZGVmYXVsdCB7CgkJbmFtZTogIlN3aXBlciIsCiAgICBwcm9wczogewogICAgICBpbnRlcnZhbDogewoJCSAgICB0eXBlOiBOdW1iZXIsCiAgICAgICAgZGVmYXVsdDogMzAwMAogICAgICB9LAogICAgICBhbmltRHVyYXRpb246IHsKCQkgICAgdHlwZTogTnVtYmVyLAogICAgICAgIGRlZmF1bHQ6IDMwMAogICAgICB9LAogICAgICBtb3ZlUmF0aW86IHsKICAgICAgICB0eXBlOiBOdW1iZXIsCiAgICAgICAgZGVmYXVsdDogMC4yNQogICAgICB9LAogICAgICBzaG93SW5kaWNhdG9yOiB7CiAgICAgICAgdHlwZTogQm9vbGVhbiwKICAgICAgICBkZWZhdWx0OiB0cnVlCiAgICAgIH0KICAgIH0sCiAgICBkYXRhOiBmdW5jdGlvbiAoKSB7CgkJICByZXR1cm4gewogICAgICAgIHNsaWRlQ291bnQ6IDAsIC8vIOWFg+e0oOS4quaVsAogICAgICAgIHRvdGFsV2lkdGg6IDAsIC8vIHN3aXBlcueahOWuveW6pgogICAgICAgIHN3aXBlclN0eWxlOiB7fSwgLy8gc3dpcGVy5qC35byPCiAgICAgICAgY3VycmVudEluZGV4OiAxLCAvLyDlvZPliY3nmoRpbmRleAogICAgICAgIHNjcm9sbGluZzogZmFsc2UsIC8vIOaYr+WQpuato+WcqOa7muWKqAogICAgICB9CiAgICB9LAogICAgbW91bnRlZDogZnVuY3Rpb24gKCkgewogICAgICAvLyAxLuaTjeS9nERPTSwg5Zyo5YmN5ZCO5re75YqgU2xpZGUKICAgICAgc2V0VGltZW91dCgoKSA9PiB7CiAgICAgICAgdGhpcy5oYW5kbGVEb20oKTsKICAgICAgICAvLyAyLuW8gOWQr+WumuaXtuWZqAogICAgICAgIHRoaXMuc3RhcnRUaW1lcigpOwogICAgICB9LCA1MDApCiAgICB9LAogICAgbWV0aG9kczogewoJCSAgLyoqCiAgICAgICAqIOWumuaXtuWZqOaTjeS9nAogICAgICAgKi8KICAgICAgc3RhcnRUaW1lcjogZnVuY3Rpb24gKCkgewoJCSAgICB0aGlzLnBsYXlUaW1lciA9IHdpbmRvdy5zZXRJbnRlcnZhbCgoKSA9PiB7CgkJICAgICAgdGhpcy5jdXJyZW50SW5kZXgrKzsKCQkgICAgICB0aGlzLnNjcm9sbENvbnRlbnQoLXRoaXMuY3VycmVudEluZGV4ICogdGhpcy50b3RhbFdpZHRoKTsKICAgICAgICB9LCB0aGlzLmludGVydmFsKQogICAgICB9LAogICAgICBzdG9wVGltZXI6IGZ1bmN0aW9uICgpIHsKICAgICAgICB3aW5kb3cuY2xlYXJJbnRlcnZhbCh0aGlzLnBsYXlUaW1lcik7CiAgICAgIH0sCgogICAgICAvKioKICAgICAgICog5rua5Yqo5Yiw5q2j56Gu55qE5L2N572uCiAgICAgICAqLwogICAgICBzY3JvbGxDb250ZW50OiBmdW5jdGlvbiAoY3VycmVudFBvc2l0aW9uKSB7CiAgICAgICAgLy8gMC7orr7nva7mraPlnKjmu5rliqgKICAgICAgICB0aGlzLnNjcm9sbGluZyA9IHRydWU7CgogICAgICAgIC8vIDEu5byA5aeL5rua5Yqo5Yqo55S7CiAgICAgICAgdGhpcy5zd2lwZXJTdHlsZS50cmFuc2l0aW9uID0ndHJhbnNmb3JtICcrIHRoaXMuYW5pbUR1cmF0aW9uICsgJ21zJzsKICAgICAgICB0aGlzLnNldFRyYW5zZm9ybShjdXJyZW50UG9zaXRpb24pOwoKICAgICAgICAvLyAyLuWIpOaWrea7muWKqOWIsOeahOS9jee9rgogICAgICAgIHRoaXMuY2hlY2tQb3NpdGlvbigpOwoKICAgICAgICAvLyA0Lua7muWKqOWujOaIkAogICAgICAgIHRoaXMuc2Nyb2xsaW5nID0gZmFsc2UKICAgICAgfSwKCiAgICAgIC8qKgogICAgICAgKiDmoKHpqozmraPnoa7nmoTkvY3nva4KICAgICAgICovCiAgICAgIGNoZWNrUG9zaXRpb246IGZ1bmN0aW9uICgpIHsKICAgICAgICB3aW5kb3cuc2V0VGltZW91dCgoKSA9PiB7CiAgICAgICAgICAvLyAxLuagoemqjOato+ehrueahOS9jee9rgogICAgICAgICAgdGhpcy5zd2lwZXJTdHlsZS50cmFuc2l0aW9uID0gJzBtcyc7CiAgICAgICAgICBpZiAodGhpcy5jdXJyZW50SW5kZXggPj0gdGhpcy5zbGlkZUNvdW50ICsgMSkgewogICAgICAgICAgICB0aGlzLmN1cnJlbnRJbmRleCA9IDE7CiAgICAgICAgICAgIHRoaXMuc2V0VHJhbnNmb3JtKC10aGlzLmN1cnJlbnRJbmRleCAqIHRoaXMudG90YWxXaWR0aCk7CiAgICAgICAgICB9IGVsc2UgaWYgKHRoaXMuY3VycmVudEluZGV4IDw9IDApIHsKICAgICAgICAgICAgdGhpcy5jdXJyZW50SW5kZXggPSB0aGlzLnNsaWRlQ291bnQ7CiAgICAgICAgICAgIHRoaXMuc2V0VHJhbnNmb3JtKC10aGlzLmN1cnJlbnRJbmRleCAqIHRoaXMudG90YWxXaWR0aCk7CiAgICAgICAgICB9CgogICAgICAgICAgLy8gMi7nu5PmnZ/np7vliqjlkI7nmoTlm57osIMKICAgICAgICAgIHRoaXMuJGVtaXQoJ3RyYW5zaXRpb25FbmQnLCB0aGlzLmN1cnJlbnRJbmRleC0xKTsKICAgICAgICB9LCB0aGlzLmFuaW1EdXJhdGlvbikKICAgICAgfSwKCiAgICAgIC8qKgogICAgICAgKiDorr7nva7mu5rliqjnmoTkvY3nva4KICAgICAgICovCiAgICAgIHNldFRyYW5zZm9ybTogZnVuY3Rpb24gKHBvc2l0aW9uKSB7CiAgICAgICAgdGhpcy5zd2lwZXJTdHlsZS50cmFuc2Zvcm0gPSBgdHJhbnNsYXRlM2QoJHtwb3NpdGlvbn1weCwgMCwgMClgOwogICAgICAgIHRoaXMuc3dpcGVyU3R5bGVbJy13ZWJraXQtdHJhbnNmb3JtJ10gPSBgdHJhbnNsYXRlM2QoJHtwb3NpdGlvbn1weCksIDAsIDBgOwogICAgICAgIHRoaXMuc3dpcGVyU3R5bGVbJy1tcy10cmFuc2Zvcm0nXSA9IGB0cmFuc2xhdGUzZCgke3Bvc2l0aW9ufXB4KSwgMCwgMGA7CiAgICAgIH0sCgogICAgICAvKioKICAgICAgICog5pON5L2cRE9NLCDlnKhET03liY3lkI7mt7vliqBTbGlkZQogICAgICAgKi8KCQkgIGhhbmRsZURvbTogZnVuY3Rpb24gKCkgewogICAgICAgIC8vIDEu6I635Y+W6KaB5pON5L2c55qE5YWD57SgCiAgICAgICAgbGV0IHN3aXBlckVsID0gZG9jdW1lbnQucXVlcnlTZWxlY3RvcignLnN3aXBlcicpOwogICAgICAgIGxldCBzbGlkZXNFbHMgPSBzd2lwZXJFbCYmc3dpcGVyRWwuZ2V0RWxlbWVudHNCeUNsYXNzTmFtZSgnc2xpZGUnKTsKICAgICAgICAvLyAyLuS/neWtmOS4quaVsAogICAgICAgIHRoaXMuc2xpZGVDb3VudCA9IHNsaWRlc0VscyYmc2xpZGVzRWxzLmxlbmd0aDsKCiAgICAgICAgLy8gMy7lpoLmnpzlpKfkuo4x5LiqLCDpgqPkuYjlnKjliY3lkI7liIbliKvmt7vliqDkuIDkuKpzbGlkZQogICAgICAgIGlmICh0aGlzLnNsaWRlQ291bnQgPiAxKSB7CiAgICAgICAgICBsZXQgY2xvbmVGaXJzdCA9IHNsaWRlc0Vsc1swXS5jbG9uZU5vZGUodHJ1ZSk7CiAgICAgICAgICBsZXQgY2xvbmVMYXN0ID0gc2xpZGVzRWxzW3RoaXMuc2xpZGVDb3VudCAtIDFdLmNsb25lTm9kZSh0cnVlKTsKICAgICAgICAgIHN3aXBlckVsLmluc2VydEJlZm9yZShjbG9uZUxhc3QsIHNsaWRlc0Vsc1swXSk7CiAgICAgICAgICBzd2lwZXJFbC5hcHBlbmRDaGlsZChjbG9uZUZpcnN0KTsKICAgICAgICAgIHRoaXMudG90YWxXaWR0aCA9IHN3aXBlckVsLm9mZnNldFdpZHRoOwogICAgICAgICAgdGhpcy5zd2lwZXJTdHlsZSA9IHN3aXBlckVsLnN0eWxlOwogICAgICAgIH0KCiAgICAgICAgLy8gNC7orqlzd2lwZXLlhYPntKAsIOaYvuekuuesrOS4gOS4qijnm67liY3mmK/mmL7npLrliY3pnaLmt7vliqDnmoTmnIDlkI7kuIDkuKrlhYPntKApCiAgICAgICAgdGhpcy5zZXRUcmFuc2Zvcm0oLXRoaXMudG90YWxXaWR0aCk7CiAgICAgIH0sCgogICAgICAvKioKICAgICAgICog5ouW5Yqo5LqL5Lu255qE5aSE55CGCiAgICAgICAqLwogICAgICB0b3VjaFN0YXJ0OiBmdW5jdGlvbiAoZSkgewogICAgICAgIC8vIDEu5aaC5p6c5q2j5Zyo5rua5YqoLCDkuI3lj6/ku6Xmi5bliqgKICAgICAgICBpZiAodGhpcy5zY3JvbGxpbmcpIHJldHVybjsKCiAgICAgICAgLy8gMi7lgZzmraLlrprml7blmagKICAgICAgICB0aGlzLnN0b3BUaW1lcigpOwoKICAgICAgICAvLyAzLuS/neWtmOW8gOWni+a7muWKqOeahOS9jee9rgogICAgICAgIHRoaXMuc3RhcnRYID0gZS50b3VjaGVzWzBdLnBhZ2VYOwogICAgICB9LAoKICAgICAgdG91Y2hNb3ZlOiBmdW5jdGlvbiAoZSkgewogICAgICAgIC8vIDEu6K6h566X5Ye655So5oi35ouW5Yqo55qE6Led56a7CiAgICAgICAgdGhpcy5jdXJyZW50WCA9IGUudG91Y2hlc1swXS5wYWdlWDsKICAgICAgICB0aGlzLmRpc3RhbmNlID0gdGhpcy5jdXJyZW50WCAtIHRoaXMuc3RhcnRYOwogICAgICAgIGxldCBjdXJyZW50UG9zaXRpb24gPSAtdGhpcy5jdXJyZW50SW5kZXggKiB0aGlzLnRvdGFsV2lkdGg7CiAgICAgICAgbGV0IG1vdmVEaXN0YW5jZSA9IHRoaXMuZGlzdGFuY2UgKyBjdXJyZW50UG9zaXRpb247CgogICAgICAgIC8vIDIu6K6+572u5b2T5YmN55qE5L2N572uCiAgICAgICAgdGhpcy5zZXRUcmFuc2Zvcm0obW92ZURpc3RhbmNlKTsKICAgICAgfSwKCiAgICAgIHRvdWNoRW5kOiBmdW5jdGlvbiAoZSkgewoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCiAgICAgICAgLy8gMS7ojrflj5bnp7vliqjnmoTot53nprsKICAgICAgICBsZXQgY3VycmVudE1vdmUgPSBNYXRoLmFicyh0aGlzLmRpc3RhbmNlKTsKCiAgICAgICAgLy8gMi7liKTmlq3mnIDnu4jnmoTot53nprsKICAgICAgICBpZiAodGhpcy5kaXN0YW5jZSA9PT0gMCkgewogICAgICAgICAgcmV0dXJuCiAgICAgICAgfSBlbHNlIGlmICh0aGlzLmRpc3RhbmNlID4gMCAmJiBjdXJyZW50TW92ZSA+IHRoaXMudG90YWxXaWR0aCAqIHRoaXMubW92ZVJhdGlvKSB7IC8vIOWPs+i+ueenu+WKqOi2hei/hzAuNQogICAgICAgICAgdGhpcy5jdXJyZW50SW5kZXgtLQogICAgICAgIH0gZWxzZSBpZiAodGhpcy5kaXN0YW5jZSA8IDAgJiYgY3VycmVudE1vdmUgPiB0aGlzLnRvdGFsV2lkdGggKiB0aGlzLm1vdmVSYXRpbykgeyAvLyDlkJHlt6bnp7vliqjotoXov4cwLjUKICAgICAgICAgIHRoaXMuY3VycmVudEluZGV4KysKICAgICAgICB9CgogICAgICAgIC8vIDMu56e75Yqo5Yiw5q2j56Gu55qE5L2N572uCiAgICAgICAgdGhpcy5zY3JvbGxDb250ZW50KC10aGlzLmN1cnJlbnRJbmRleCAqIHRoaXMudG90YWxXaWR0aCk7CgogICAgICAgIC8vIDQu56e75Yqo5a6M5oiQ5ZCO6YeN5paw5byA5ZCv5a6a5pe25ZmoCiAgICAgICAgdGhpcy5zdGFydFRpbWVyKCk7CiAgICAgIH0sCgogICAgICAvKioKICAgICAgICog5o6n5Yi25LiK5LiA5LiqLCDkuIvkuIDkuKoKICAgICAgICovCiAgICAgIHByZXZpb3VzOiBmdW5jdGlvbiAoKSB7CiAgICAgICAgdGhpcy5jaGFuZ2VJdGVtKC0xKTsKICAgICAgfSwKCiAgICAgIG5leHQ6IGZ1bmN0aW9uICgpIHsKICAgICAgICB0aGlzLmNoYW5nZUl0ZW0oMSk7CiAgICAgIH0sCgogICAgICBjaGFuZ2VJdGVtOiBmdW5jdGlvbiAobnVtKSB7CiAgICAgICAgLy8gMS7np7vpmaTlrprml7blmagKICAgICAgICB0aGlzLnN0b3BUaW1lcigpOwoKICAgICAgICAvLyAyLuS/ruaUuWluZGV45ZKM5L2N572uCiAgICAgICAgdGhpcy5jdXJyZW50SW5kZXggKz0gbnVtOwogICAgICAgIHRoaXMuc2Nyb2xsQ29udGVudCgtdGhpcy5jdXJyZW50SW5kZXggKiB0aGlzLnRvdGFsV2lkdGgpOwoKICAgICAgICAvLyAzLua3u+WKoOWumuaXtuWZqAogICAgICAgIHRoaXMuc3RhcnRUaW1lcigpOwogICAgICB9CiAgICB9Cgl9Cg=="},{"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.25\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"]}]} |