<template>
<div class="swiperpa">
<div class="timeline">
<div class="events-wrapper">
<div class="line" ref='linewidth'>
</div>
<ul>
<li v-for="(point,index) in countpoint" ref='dot' v-on:mouseover="addEffect(point,index)" @click="goTo(index)" :class="{on:index === nowIndex}"></li>
<div class='pulley'></div>
</ul>
</div>
<ul class="timeline-navigation">
<li class="prev" @click="goToPrev()"> </li>
<li class="next" @click="goToNext()" ></li>
</ul>
<div class="play" ref = "play" @click="play()"></div>
<div class="shut" ref = "shut" @click="shut()"></div>
</div>
</div>
</template>
<script>
export default {
props: {
inv: {
type: Number,
default: 1000,
},
countpoint:{
type:Number,
default:50,
},
},
data() {
return {
nowIndex: 0,
curPage:1,
pageNum:10,
// points: [
// new BMap.Point(117.227819, 23.814327),
// new BMap.Point(117.171452, 23.800036),
// new BMap.Point(117.132368, 23.791609),
// new BMap.Point(117.076919, 23.764658),
// new BMap.Point(117.024827, 23.754510),
// new BMap.Point(116.981047, 23.739533),
// new BMap.Point(116.939091, 23.717617),
// new BMap.Point(116.900199, 23.699399),
// new BMap.Point(116.885031, 23.689196),
// new BMap.Point(116.874584, 23.679668),
// new BMap.Point(116.811841, 23.626940),
// new BMap.Point(116.759632, 23.604713),
// new BMap.Point(116.725061, 23.587160),
// new BMap.Point(116.651402, 23.566650),
// new BMap.Point(116.595323, 23.545934),
// new BMap.Point(116.565463, 23.533553),
// new BMap.Point(116.552337, 23.519046),
// new BMap.Point(116.544596, 23.508704),
// new BMap.Point(116.537630, 23.464337),
// new BMap.Point(116.528264, 23.443634),
// new BMap.Point(116.518571, 23.425543),
// new BMap.Point(116.502256, 23.414608),
// new BMap.Point(116.429954, 23.388459),
// new BMap.Point(116.388039, 23.368854),
// new BMap.Point(116.352537, 23.347284),
// new BMap.Point(116.281605, 23.327247),
// new BMap.Point(116.227800, 23.293717),
// new BMap.Point(116.214108, 23.280499),
// ]
}
},
created() {
},
computed: {
nextIndex() {
if (this.nowIndex === this.countpoint - 1) {
return 0
} else {
return this.nowIndex + 1
}
}
},
methods: {
drawLine() {
this.$refs.linewidth.style.width = (this.countpoint - 1) * 0.3 + "rem"
},
permutation() {
// console.log(this.$refs.dot, 'this.refs.dot')
var j = -1; //从初始点开始
this.$refs.dot.forEach((ele, ind) => {
j++
ele.style.left = j * 0.3 + "rem" //分隔排列
})
},
addEffect(evnet, point, ind) {
// console.log(event.target, point, 'event')
},
goTo(index) {
this.nowIndex = index
this.$emit("onchange", index)
// console.log(index,'index')
// this.$emit("change", this.index)
},
goToPrev() {
//判断切换
if( this.$refs.play.style.display = "none"){
this.$refs.shut.style.display = "none"
this.$refs.play.style.display = "block"
}
clearInterval(this.invId)
this.nowIndex = 0;
if(this.curPage >1){
this.curPage -=1
// console.log(this.curPage,"this.curPage")
this.$emit("changepage", this.curPage)
}
// this.$refs.line.style = "transition:all .5s;transform:translateX(-900px)"
//发送请求获取新的包
//告诉父组件一个事件，事件包括（发送请求 请求页面条数，将请求的放数组中去,画线要放到计算属性里面，points改变而改变）
},
goToNext() {
// console.log(this.curPage ,"goNext")
if( this.$refs.play.style.display = "none"){
this.$refs.shut.style.display = "none"
this.$refs.play.style.display = "block"
}
clearInterval(this.invId)
this.nowIndex = 0;
if(this.curPage >= 1 && this.curPage < this.pageNum){
this.curPage += 1
// console.log(this.curPage,'this.curpage')
this.$emit("changepage", this.curPage)
}
// this.$refs.line.style = "transition:all .5s;transform:translateX(-900px)"
},
play() {
// console.log("play")
// console.log('this.$refs.play')
this.$refs.play.style.display = "none"
this.runInv()
this.$refs.shut.style.display = "block"
},
shut() {
this.clearInv()
this.$refs.shut.style.display = "none"
this.$refs.play.style.display = "block"
},
runInv() {
let timeSpeed = this.inv
this.invId = setInterval(() => {
this.goTo(this.nextIndex)
}, timeSpeed )
},
clearInv() {
clearInterval(this.invId)
},
},
// watch: {
// curIndex() {
// this.$emit("onchange", this.curIndex)
// }
// },
mounted() {
this.$nextTick(() => {
this.permutation();
this.drawLine()
})
}
}
</script>
<style lang="scss" scoped>
@import './src/assets/css/global.scss';
.swiperpa {
// @media screen and (max-device-width: 3000px) and(min-device-width:1920px){
// .timeline {
// width: 18.87rem;//边框也算
// }
// }
@media screen and (max-device-width: 1920px) and(min-device-width:0px){
.timeline {
width: 15.87rem;//边框也算
}
}
.timeline {
position: relative;
height: 50px;
margin: 0 auto;
// border: 1px solid red;
.events-wrapper {
position: relative;
height: 100%; // margin: 0 auto;
// overflow: hidden;
font-size: 0;
// border: 1px solid blue;
margin: 0 0.48rem;
.line {
position: absolute;
z-index: 1;
left: 0;
top: 50%;
transform: translateY(-50%);
height: 0.02rem;
background: #d9d9d9;
transition: transform 0.4s;
width: 100%;
}
li {
position: absolute;
display: inline-block;
top: 50%;
transform: translateY(-50%);
z-index: 20px;
height: 12px;
width: 12px;
border-radius: 8px;
border: 0.02rem solid #dfdfdf;
background-color: #fff;
z-index: 100; // left:100px;
cursor: pointer;
}
.on{
border: 2px solid red;
}
.pulley {
position: absolute;
top: 20px;
height: 30px;
width: 30px; // background-color:red;
}
}
.timeline-navigation {
.prev {
position: absolute;
left:0.1rem;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
border: 2px solid red;
border-radius: 50%;
background: #fff;
cursor: pointer;
}
.next {
position: absolute;
right: 0.1rem;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
border: 2px solid red;
border-radius: 50%;
background: #fff;
cursor: pointer;
}
}
.play {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
margin-left: -40px;
height: 30px;
width: 30px;
background-color: red;
cursor: pointer;
}
.shut {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
margin-left: -40px;
height: 30px;
width: 30px;
background-color: blue;
cursor: pointer;
display:none;
}
}
}
</style>