upgrade
This commit is contained in:
@ -91,14 +91,14 @@
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
data () {
|
||||
return {
|
||||
socialInfo: false,
|
||||
searchVal: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
info(type) {
|
||||
info (type) {
|
||||
if (type === 'qq') {
|
||||
this.socialInfo = 'QQ: 373226722'
|
||||
} else if (type === 'weixin') {
|
||||
@ -111,8 +111,8 @@ export default {
|
||||
this.socialInfo = false
|
||||
}, 3000)
|
||||
},
|
||||
search() {
|
||||
if (this.searchVal !== '') this.$router.push({ path: 'search?q=' + this.searchVal })
|
||||
search () {
|
||||
if (this.searchVal !== '') { this.$router.push({ path: 'search?q=' + this.searchVal }) }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -41,7 +41,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
function toArray(arraylike) {
|
||||
function toArray (arraylike) {
|
||||
return Array.prototype.slice.call(arraylike)
|
||||
}
|
||||
|
||||
@ -82,7 +82,7 @@ export default {
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
data () {
|
||||
return {
|
||||
swiper: null,
|
||||
swiperWidth: 0,
|
||||
@ -107,7 +107,7 @@ export default {
|
||||
isOnly: false
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
mounted () {
|
||||
this.box = 'swiper-box-' + Math.random().toFixed(2) * 1000
|
||||
setTimeout(() => {
|
||||
/* 初始化的时候, 拿到所有的 DOM 元素以及相关属性 */
|
||||
@ -130,13 +130,13 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
/* 阻止容器的上下滚动, 并且只有在水平方向上面滚动超过 10px 才可以阻止 */
|
||||
fn(e) {
|
||||
fn (e) {
|
||||
if (this.vLock || Math.abs(this.pos.startX - this.pos.moveX) > 10) {
|
||||
e.preventDefault()
|
||||
}
|
||||
},
|
||||
/* 滑动到指定的页面 */
|
||||
slideTo(index) {
|
||||
slideTo (index) {
|
||||
if (!this.moving) {
|
||||
const currentSlide = Math.round(Math.abs(this.left()) / this.swiperWidth)
|
||||
/* 如果索引值不合法 或者和目前的值相等 */
|
||||
@ -155,7 +155,7 @@ export default {
|
||||
this.translateX(-this.swiperWidth * (index + 1))
|
||||
}
|
||||
},
|
||||
next() {
|
||||
next () {
|
||||
if (!this.moving) {
|
||||
clearTimeout(this.timer)
|
||||
this.moving = true
|
||||
@ -163,7 +163,7 @@ export default {
|
||||
this.translateX(this.left() - this.swiperWidth)
|
||||
}
|
||||
},
|
||||
previous() {
|
||||
previous () {
|
||||
if (!this.moving) {
|
||||
clearTimeout(this.timer)
|
||||
this.moving = true
|
||||
@ -171,7 +171,7 @@ export default {
|
||||
this.translateX(this.left() + this.swiperWidth)
|
||||
}
|
||||
},
|
||||
initElement() {
|
||||
initElement () {
|
||||
/* 因为传递过来的是个字符串, 所以要手动加点 */
|
||||
this.swiper = document.querySelector('.' + this.box)
|
||||
this.swiperWidth = this.swiper.clientWidth
|
||||
@ -184,7 +184,7 @@ export default {
|
||||
this.isOnly = true
|
||||
}
|
||||
},
|
||||
cloneSlide() {
|
||||
cloneSlide () {
|
||||
const head = this.slides[0].cloneNode(this.slides[0], true)
|
||||
const tail = this.slides[this.slidesNumber - 1].cloneNode(this.slides[this.slidesNumber - 1], true)
|
||||
this.swiper.appendChild(head)
|
||||
@ -194,7 +194,7 @@ export default {
|
||||
this.slidesNumber = this.slides.length
|
||||
},
|
||||
/* 根据用户给定的 defaultSlide 设置 init slide 的值 */
|
||||
setDefaultSlide() {
|
||||
setDefaultSlide () {
|
||||
/*
|
||||
一切用户给定的值, 都是从 0 - x 开始, 比如用户数据里面有 6个数据
|
||||
那么给定的就是 0 - 5
|
||||
@ -214,7 +214,7 @@ export default {
|
||||
/*
|
||||
## start
|
||||
*/
|
||||
play() {
|
||||
play () {
|
||||
this.timer = setTimeout(() => {
|
||||
clearTimeout(this.timer)
|
||||
this.moving = true
|
||||
@ -223,7 +223,7 @@ export default {
|
||||
this.translateX(-(this.swiperWidth + Math.abs(this.left())))
|
||||
}, this.interval)
|
||||
},
|
||||
transitionend() {
|
||||
transitionend () {
|
||||
this.transitionDuration(0)
|
||||
/*
|
||||
一次滑动结束之后, 通过计算, 实际上我们可以拿到当前处于内部索引的第几个 slide
|
||||
@ -254,7 +254,7 @@ export default {
|
||||
}
|
||||
},
|
||||
/* toushstart handler */
|
||||
s(e) {
|
||||
s (e) {
|
||||
if (this.isOnly) {
|
||||
return
|
||||
}
|
||||
@ -278,7 +278,7 @@ export default {
|
||||
}
|
||||
},
|
||||
/* toushmove handler */
|
||||
m(e) {
|
||||
m (e) {
|
||||
if (this.isOnly) {
|
||||
return
|
||||
}
|
||||
@ -294,7 +294,7 @@ export default {
|
||||
}
|
||||
},
|
||||
/* toushend handler */
|
||||
e(e) {
|
||||
e (e) {
|
||||
if (this.isOnly) {
|
||||
return
|
||||
}
|
||||
@ -314,7 +314,7 @@ export default {
|
||||
}
|
||||
},
|
||||
/* 响应用户滚动行为 */
|
||||
recover() {
|
||||
recover () {
|
||||
this.transitionDuration(this.userDuration)
|
||||
const distance = Math.abs(this.left()) % this.swiperWidth
|
||||
let point = []
|
||||
@ -365,13 +365,13 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
translateX(value) {
|
||||
translateX (value) {
|
||||
this.swiper.style.transform = 'translate3d(' + value + 'px, 0, 0)'
|
||||
},
|
||||
transitionDuration(ms) {
|
||||
transitionDuration (ms) {
|
||||
this.swiper.style.transitionDuration = ms + 'ms'
|
||||
},
|
||||
left() {
|
||||
left () {
|
||||
return this.swiper.getBoundingClientRect().left
|
||||
}
|
||||
}
|
||||
|
Reference in New Issue
Block a user