topic description
now want to achieve an infinite sliding navigation bar menu, now click the left and right button can be infinitely scrolled, the page refreshed, back to the home page, now how to let me click on another icon, refresh will not return to the home page ah? Trouble the gods!
sources of topics and their own ideas
get all the data of items in data, and then use list to get no more than five values. There are seven data. Every time I click a button, the button slides to the middle. Now when the page is refreshed, it will go back to the home page
.related codes
/ / Please paste the code text below (do not replace the code with pictures)
< template >
<div>
<p v-for="(item, index) in list" class="vaCarousel-title" v-show="item.id === isStyle">{{item.conent}}
<div class="va-carousel" :style="{ width: width, height: height}" >
<transition-group name="list" tag="div" class="image-list" :css="false" @before-enter="beforeEnter" @enter="enter" @before-leave="beforeLeave" @leave="leave">
<div class="image-item" :style="{width: itemWidth}" v-for="(item, index) in list" :class="{active: index === (total - 1) / 2}" :key="item.id">
<router-link :class="{activeTo: index === (total - 1) / 2}" v-has="item.path" :to="{path:item.path}" @mousemove.native="selectedShow(item,index)" @mouseleave.native="selectedNone(item,index)" @click.native="selectedItem(item, index)">
<icon :class="item.class" :name="item.name"></icon>
</router-link>
</div>
<template arrow="true">
<span key="prev" class="preview" @click="prev">
<slot name="prev">
<i class="el-icon-caret-left"></i>
</slot>
</span>
<span key="next" class="next" @click="next">
<slot name="next">
<i class="el-icon-caret-right"></i>
</slot>
</span>
</template>
</transition-group>
</div>
</div>< / template >
< script >
import Velocity from "velocity-animate"
export default {
name: "VACarousel",
props: {
total: {
tyep: Number,
default: 5
},
height: {
type: String,
default: "42px"
},
width: {
type: String,
default: "100%"
},
imgWidth: {
type: String,
default: "100%"
},
imgHeight: {
type: String,
default: "70%"
},
prevText: {
type: String,
default: "prev"
},
nextText: {
type: String,
default: "next"
},
},
data() {
return {
list: [], //
hover: false,
timer: null,
itemWidth: "",
isReverse: false,
isStyle: 3,
items: [{
"path": "/Im",
"class": "im-icon",
"name": "im",
"id": 1,
"conent":""
},
{
"path": "/Count",
"class": "count-icon",
"name": "count",
"id": 2,
"conent":""
},
{
"path": "/home",
"class": "home-icon",
"name": "home",
"id": 3,
"conent":""
},
{
"path": "/RoleAssignment",
"class": "wx-icon",
"name": "wx",
"id": 4,
"conent":""
},
{
"path": "/Worklist",
"class": "worklist-icon",
"name": "worklist",
"id": 5,
"conent":""
},
{
"path": "/WcmDome",
"class": "wcm-icon",
"name": "wcm",
"id": 6,
"conent":""
},
{
"path": "/Install",
"class": "install-icon",
"name": "install",
"id": 7,
"conent":""
}
],
sessionItem:[]
}
},
beforeMount() {
this.itemWidth = 100 / this.total + "%";
this.list = this.items.slice(0, this.total);
},
mounted() {
},
methods: {
//
next() {/ / if the list of pictures is less than the number of pictures to be displayed, do not scroll
if(this.items < this.total) {
return
}
// :
//
//
let indexOfItems = this.items.findIndex(
item => item.id === this.list[this.list.length - 1].id
)
if(indexOfItems === this.items.length - 1) {
//
this.list.push(this.items[0])
} else {
//
this.list.push(this.items[indexOfItems + 1])
}
//
this.list.shift();
this.isReverse = false
},
//
prev() {
//
if(this.items.length < this.total) {
return
}
// , :
//
//
let indexOfItems = this.items.findIndex(
item => item.id === this.list[0].id
)
// console.log(indexOfItems)
if(indexOfItems === 0) {
this.list.unshift(this.items[this.sessionItem.length - 1])
} else {
this.list.unshift(this.items[indexOfItems - 1])
}
//
this.list.pop()
this.isReverse = true
},
//
selectedItem(item, index) {
this.$emit("selectedItem", item, index)
this.isStyle = item.id;
if(index == 1) {
this.prev();
} else if(index == 0) {
this.prev();
this.prev();
} else if(index == 3) {
this.next();
} else if(index == 4) {
this.next();
this.next();
} else {
return
}
},
selectedShow(item,index){
this.isStyle = item.id;
},
selectedNone(item,index){
this.isStyle = "";
},
handleMouseEnter() {
this.hover = true
},
beforeEnter(el) {
// image-item
let isImageItem = el.className.indexOf("image-item") > -1
if(isImageItem) {
el.style.opacity = 0
if(this.isReverse) {
el.style.transform = "translateX(-100%)"
} else {
el.style.transform = "translateX(100%)"
}
}
},
enter(el, done) {
// image-item
let isImageItem = el.className.indexOf("image-item") > -1
if(isImageItem) {
Velocity(el, {
opacity: 1,
translateX: "0px"
}, {
complate: done
})
} else {
done()
}
},
beforeLeave(el) {
// image-item
let isImageItem = el.className.indexOf("image-item") > -1
if(isImageItem) {
el.style.position = "absolute"
if(this.isReverse) {
el.style.right = 0
} else {
el.style.left = 0
}
}
},
leave(el, done) {
// image-item
let isImageItem = el.className.indexOf("image-item") > -1
if(isImageItem) {
el.style.opacity = 0
if(this.isReverse) {
el.style.right = `-${this.itemWidth}`
// el.style.transform = "translateX(100%)"
} else {
el.style.transform = "translateX(-100%)"
}
setTimeout(done, 1000)
} else {
done()
}
}
// end
}
}< / script >
< style scope lang= "scss" >
.va-carousel {
overflow: hidden;
background: -sharp253046;
border-radius: 50px;
}
.vaCarousel-title{
margin: 0 auto;
padding: 2px;
/*border: 1px solid red;*/
width: 100%;
font-size: 14px;
}
.image-list {
width: 76%;
height: 100%;
position: relative;
display: flex;
flex-direction: row;
align-items: center;
box-sizing: border-box;
margin: 0 auto;
}
.image-item {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 0 20px;
box-sizing: border-box;
width: 100%;
height: 100%;
border-radius: 8px;
cursor: pointer;
transition: all 1s;
position: relative;
}
.image-item.active {
transform: scale(1.2);
}
.image-item p {
position: absolute;
left: 55px;
bottom: -30px;
}
.image-item img {
border-radius: 8px;
}
.preview,.next {
position: absolute;
font-size: 30px;
color: white;
cursor: pointer;
}
.preview:hover,.next:hover{
color: -sharp2D78BB;
}
.preview {
left: -20px;
transform: translateX(-100%);
}
.next {
right: -20px;
transform: translateX(100%);
}
.home-icon,
.im-icon,
.count-icon,
.install-icon,
.wcm-icon,
.worklist-icon,
.wx-icon {
width: 30px;
height: 30px;
color: white;
}
.activeTo{
svg{
color: -sharp2D78BB;
}
}
< / style >
what result do you expect? What is the error message actually seen?
how to refresh the page, the button I clicked is displayed in the center
.