rendering
Train of thought
Container components
swiper.vue
<template>
<section class="wh_content" @touchmove="fn">
<div :class="className" class="wh_swiper" @touchstart="s" @touchmove="m" @touchend="e">
<slot/>
</div>
<div v-if="showIndicator" class="wh_indicator">
<div v-for="(tag,$index) in slidesLength" v-bind:class="{ wh_show_bgcolor: index-1==$index }" class="wh_indicator_item" @click="slideTo($index)"></div>
</div>
</section>
</template>
<script>
export default {
data() {
return {
slidesLength: 1,
_width: 0,
auto: true,
slideing: true,
timer1: ' ',
className: ' ', dom: {}, t: {sx: 0, s: 0, m: 0, e: 0}, index: 1}}, props: {// The time needed to slide autoPlay: {default:trueDuration: {default: 500}, showIndicator: {default: 2500}, showIndicator: {default: 2500}, showIndicator: {default: 2500}true}},mounted() {
this.className = `wh_swiper_${Math.random().toFixed(3) * 1000}`
setTransform = 'translate3d(0px, 0px, 0px)' this.dom['-webkit-transform'] = `translate3d(0px, 0px, 0px)`
this.dom['-ms-transform'] = `translate3d(0px, 0px, 0px)`
if (this.autoPlay) {
this.setTime()
}
}, 50)
},
methods: {
s(x) {
if(this.slideing) { this.clearTimeOut() this.t.sx = this.getTransform() this.t.s = x.touches[x.touches.length - 1].clientX } }, m(x) {if(this.slideing && this.t.s ! = -1) { this.clearTimeOut() this.t.m = x.touches[x.touches.length - 1].clientX - this.t.s this.setTransform(this.t.m + this.t.sx) } }, e(x) {if (this.slideing && this.t.s != -1) {
this.clearTimeOut()
this.setTransform(this.t.m + this.t.sx)
var x = this.getTransform()
x += this.t.m > 0 ? this._width * 0.3 : this._width * -0.3
this.index = Math.round(x / this._width) * -1
this.toPage('touch')}},setTransform(num) {
this.dom.transform = `translate3d(${num}px, 0px, 0px)`
this.dom['-webkit-transform'] = `translate3d(${num}px, 0px, 0px)`
this.dom['-ms-transform'] = `translate3d(${num}px, 0px, 0px)`
},
getTransform() {
var x = this.dom.transform || this.dom['-webkit-transform'] || this.dom['-ms-transform'];
x = x.substring(12)
x = x.match(/(\S*)px/)[1]
return Number(x)
},
fn(e) {
e.preventDefault()
},
prevSlide() {
this.clearTimeOut()
this.index--
this.toPage()
},
nextSlide() {
this.clearTimeOut()
this.index++
this.toPage()
},
slideTo(index) {
this.clearTimeOut()
this.index = index+1;
this.toPage()
},
toPage(type) {
this.slideing = false
this.dom.transition = type= ='touch' ? '250ms' : this.duration + 'ms'This.settransform ((this.index-1) * -1 * this._width) this.t.m = 0 this.t.s = -1 // Ensure the next assignmentif (this.autoPlay) {
this.setTime()
}
var timeDuration = type= ='touch' ? '250' : this.duration
setTimeout(() => {
this.dom.transition = '0s'
if (this.index >= this.slidesLength + 1) {
this.index = 1
this.setTransform((this.index-1) * -1 * this._width)
}
if (this.index <= 0) {
this.index = this.slidesLength
this.setTransform((this.index-1) * -1 * this._width)
}
this.$emit('transtionend', this.index - 1)
this.auto = true
this.slideing = true
}, timeDuration)
},
setTime() {
this.timer1 = window.setTimeout(() => {
if (this.auto) {
this.index++
this.toPage()
} else {
window.clearTimeout(this.timer1)
}
}, this.interval)
},
starDom() {
var SlideDom = document.querySelector('. ' + this.className).getElementsByClassName('wh_slide')
var contentWidth = document.getElementsByClassName('wh_content')[0].offsetWidth;
var slideWidth = document.getElementsByClassName('wh_slide')[0].offsetWidth;
var marginRight = Number.parseInt(window.getComputedStyle(document.getElementsByClassName('wh_slide')[0]).marginRight.replace('px'.' '));
this.slidesLength = Math.ceil(SlideDom.length/(Math.floor(contentWidth/(slideWidth+marginRight))));
if (this.slidesLength > 1) {
var cloneDom1 = SlideDom[0].cloneNode(true// To the last append varcloneDom2 = SlideDom[this.slidesLength - 1].cloneNode(true// Call the first append document.querySelector('. ' + this.className).insertBefore(cloneDom2, SlideDom[0])
document.querySelector('. ' + this.className).appendChild(cloneDom1)
this._width = document.querySelector('. ' + this.className).offsetWidth
this.dom = document.querySelector('. ' + this.className).style
}
},
clearTimeOut() {
this.auto = false
window.clearTimeout(this.timer1)
}
}
}
</script>
<style>
.wh_content {
position: relative;
z-index: 1;
overflow: hidden;
width: 100%;
}
.wh_swiper {
display: -webkit-box;
display: -moz-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-moz-transition-duration: 0s linear;
-webkit-transition-duration: 0s linear;
-o-transition-duration: 0s linear;
transition-duration: 0s linear;
}
.wh_indicator {
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
background: 0 0;
}
.wh_indicator_item {
display: inline-block;
width: 8px;
height: 8px;
margin: 1px 7px;
cursor: pointer;
border-radius: 100%;
background: #aaa;
}
.wh_show_bgcolor {
background: #0fc37c;
}
</style>
Copy the codeContent per page slide.vue
<template>
<div class="wh_slide" @click="clickSlide">
<slot/>
</div>
</template>
<script>
export default {
methods: {
clickSlide() {
this.$emit('click')
}
}
}
</script>
<style scoped>
.wh_slide {
-ms-flex-negative: 0;
flex-shrink: 0;
z-index: 10;
min-height: 100px;
}
.wh_slide img {
display: block;
}
</style>
Copy the codeReference way
import Swiper from './swiper';
import Slide from './slide';
Copy the code<Swiper v-if="movies.length>0" :autoPlay='true' :showIndicator='true' interval="2500" duration="500" class="ui-slide-content">
<Slide class="ui-slide-item" v-for="(movie,index) in movies" v-bind:key="index">
<li class="poster">
<a :href="movie.href" target="_blank">
<img :src="movie.imageSrc">
</a>
</li>
<li class="title">
<a :href="movie.href" target="_blank">{{movie.name}}</a>
</li>
<li class="rating">
<span :class="starClass(movie.score)"></span>
<span class="subject-rate">{{movie.score}}</span>
</li>
<li class="ticket_btn">
<span>
<a :href="movie.href" target="_blank"</span> </li> </Slide> </Swiper>Copy the codeCode path
https://github.com/fionaVg1/vue-express-mongo
Copy the code