<template>
<div class="wrapper homebody">
<swiper ref="swiper" :options="swiperOption" class="top-swiper">
<swiper-slide :class="{'banner-item': true, 'active': active == index}" v-for="(item, index) in tabList" :key="index">
<div>
<p :class="'icon '+ item.icon"></p>
{{item.name}}
</div>
</swiper-slide>
</swiper>
</div>
</template>
<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
import 'swiper/css/swiper.css';
export default {
components: {
Swiper,
SwiperSlide
},
watch: {
$route: {
deep: true,
immediate: true,
handler(val) {
this.tabList.forEach((k, i) => {
if (val.name == k.path) {
// 路由发生变化,下面的菜单选中也变化
this.active = i
this.$nextTick(() => {
this.$refs.swiper.$swiper.slideTo(i, 1000, false);//切换到第一个slide,速度为1秒
})
}
})
},
},
},
data() {
return {
active: 0,
tabList: [
{
icon: "icon-list",
path: "index",
name: "列表"
},
{
icon: "icon-statis",
path: "historySearch",
name: "统计"
},
{
icon: "icon-wxj",
path: "notInspected",
name: "历史未巡检"
},
{
icon: "icon-wzsg",
path: "unlicensedConstru",
name: "无证施工"
},
{
icon: "icon-wzsg",
path: "construcStatis",
name: "施工统计"
}
],
swiperOption: {
slidesPerView: 3, //设置能够同时显示的数量(可设置 auto)
autoplay: false, //是否开启自动轮播
// loop: true,
on: {
tap: (swiper,) => {
console.log("tap", swiper)
let text = swiper.target.innerText;
this.swpierHandle(text)
},
}
}
}
},
mounted() {
},
methods: {
swpierHandle(path) {
this.tabList.forEach((item, index) => {
if (path == item.name) {
this.active = index
this.$router.push({
name: item.path
});
}
})
},
}
}
</script>
<style lang='css' scoped>
</style>
12-27