纯js+css实现手机端的轮播控件
纯js+css实现手机端的轮播控件
1.首先是页面布局，外层一个div容器 .loop-wrap,我这里宽度设置的是100vw，这个可以根据实际情况来设置宽度大小，
2.第二层有个轮播图容器 .sw-container ,
3.接着是一个页面指示器.pagination
下面是全部的代码
<template>
<section>
<div class="loop-wrap">
<div class="sw-container" ref="sw" id="sw" @touchstart.preventDefault="touchStart($event)"
@touchend.preventDefault="touchEnd($event)">
<img :src="i.img" v-for="i in options" class="img"/>
</div>
<div class="pagination">
<span v-for="(item, index) in options" :class="{'active': index==currentIndex}"
@click="go(index)"></span>
</div>
</div>
</section>
</template>
<script type="es6">
export default {
data(){
return {
startX: '',
startY: '',
startTime: 0,
endTime: 0,
isRecord: false, //长按事件
st: '',
st2: '',
currentIndex: 0,
options: [
{img: 'https://cdn.dianchouapp.com/FuEkbXf3ba_ALDGy-3EzOZ2vpdy3'},
{img: 'https://cdn.dianchouapp.com/Fvn6stapp1Rq2Iwn8vUqd8wNyV-F'},
{img: 'https://cdn.dianchouapp.com/Ft07OeoZvppwrZn9s2MLeYK2ebOl'},
{img: 'https://cdn.dianchouapp.com/Fsw3MId7u-lKgkqjDfeQFRF45v8b'},
{img: 'https://cdn.dianchouapp.com/FoDmByRsaRijS77ka3Sqqn41wFXr'},
]
}
},
beforeMount(){
},
methods: {
touchStart: function (e) {
this.startTime = new Date().getTime()
// console.log(e)
//event.preventDefault() //阻止默认事件（长按的时候出现复制）
this.startX = e.changedTouches[0].pageX
this.startY = e.changedTouches[0].pageY
},
touchEnd: function (e) {
let that = this
this.endTime = new Date().getTime()
if (this.endTime - this.startTime < 500) {
this.endTime = 0
this.startTime = 0
console.log('取消')
} else {
// alert("长按")
clearTimeout(this.st2)
clearInterval(this.st) //清除定时器
this.st2 = setTimeout(()=>{
this.st = setInterval(() => {
this.currentIndex++;
if (this.currentIndex == this.options.length) {
this.currentIndex = 0
}
this.$refs.sw.style = 'left:-' + this.currentIndex * 100 + 'vw'
}, 3000)
},2000)
}
console.log(that.currentIndex)
let endX = e.changedTouches[0].pageX
let endY = e.changedTouches[0].pageY
let X = endX - this.startX //x轴位移
let Y = endY - this.startY //y轴位移
if (Math.abs(X) > Math.abs(Y) && X > 0) {
//向右
if (that.currentIndex == 0) {
that.go(that.options.length - 1)
} else {
that.go(that.currentIndex - 1)
}
} else if (Math.abs(X) > Math.abs(Y) && X < 0) {
//向左
if (that.currentIndex == that.options.length - 1) {
that.go(0)
} else {
that.go(that.currentIndex + 1)
}
} else if (Math.abs(Y) > Math.abs(X) && Y > 0) {
console.log('top 2 bottom')
} else if (Math.abs(Y) > Math.abs(X) && Y < 0) {
console.log('bottom 2 top')
} else {
console.log('just touch')
}
},
go(index){
this.currentIndex = index
console.log(document.getElementsByClassName('img')[index].offsetLeft)
// console.log(this.$refs.sw.offsetLeft)
let left = document.getElementsByClassName('img')[index].offsetLeft
this.$refs.sw.style = "left:-" + left + "px;";
}
},
created(){
},
mounted(){
this.st = setInterval(() => {
this.currentIndex++;
// console.log(this.currentIndex)
if (this.currentIndex == this.options.length) {
this.currentIndex = 0
}
this.$refs.sw.style = 'left:-' + this.currentIndex * 100 + 'vw'
}, 3000)
},
beforeDestory(){
clearInterval(this.st)
clearTimeout(this.st2)
}
}
</script>
<style lang="less" scoped>
.loop-wrap {
width: 100vw;
position: relative;
height: 4rem;
overflow: hidden;
}
.sw-container {
position: absolute;
left: 0;
top: 0;
width: 500%;
height: 100%;
font-size: 0;
transform: translate(0, 0); /* 初始位置位移 */
transition: all .3s;
img {
width: 100vw;
height: 100%;
}
}
.pagination {
display: flex;
justify-content: center;
position: absolute;
top: 3.6rem;
left: 40%;
z-index: 2;
span {
width: .15rem;
height: .15rem;
border-radius: 50%;
background: #FFFFFF;
margin: 0 .1rem;
}
.active {
background: #3a17bb;
}
}
</style>
