vue+swiper实现时间轴效果

本文实例为大家分享了vue+swiper实现时间轴效果的具体代码，供大家参考，具体内容如下

效果：

首先引入，有淘宝镜像的用 cnpm install swiper --save 没有的用 npm install swiper --save

<template> <div style='height:100%;width:100%;position:relative;'> <div class='swiperlist'> <div class='swipers'><div class='swiper-container'> <div class='swiper-wrapper'> <div v-for='(activity, index) in superurl' :key='index'> <div style='padding-left: 4px;'><div class='step-line'></div><div class='step-content'> <div class='step-num'></div> <div class='sub_title'>{{activity.img}}</div></div> </div> </div> </div></div><div v-if='superurl.length>2'> <div class='swiper-button-prev'></div> <div class='swiper-button-next'></div></div> </div> </div> </div></template><script>import Swiper from 'swiper';import '../../../../../node_modules/swiper/css/swiper.min.css';import baseMap from './baseMap.vue';import '../../../../../static/mapbox/css/map.css';export default { name: 'Map', components: { baseMap }, data() { return { superurl: [{ url: '', img: '2019-01'},{ url: '', img: '2019-02'},{ url: '', img: '2019-03'},{ url: '', img: '2019-04'},{ url: '', img: '2019-05'},{ url: '', img: '2019-06'} ] }; }, watch: {}, methods: {}, mounted() { var mySwiper = new Swiper('.swiper-container', { slidesPerView: 3, //显示三个轮播 centeredSlides: true, //设定为true时，active slide会居中，而不是默认状态下的居左。 centerInsufficientSlides: true, //开启这个参数，当slides的总数小于slidesPerView时，slides居中。不适用于loop模式和slidesPerColumn centeredSlidesBounds: true, //使得第一个和最后一个Slide 始终贴合边缘。 // loop: true, //循环 // autoplay: true, //自动播放 direction: 'vertical', //竖屏 navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev' } }); }};</script><style scoped>.swiperlist { width: 90px; height: 256px; position: absolute; background: #f5f5f5; left: 5px; top: 205px; overflow: hidden; padding: 32px 0; border-radius: 6px;}.swipers { width: 100%; height: 250px; overflow: hidden;}.swiper-container { height: 250px !important;}.swiper-slide-active { color: #3a70ca;}.swiper-button-prev,.swiper-container-rtl .swiper-button-next { left: 28px; right: auto; top: 15px; transform: rotate(90deg); color: #3a70ca;}.swiper-button-next,.swiper-container-rtl .swiper-button-prev { top: 94%; transform: rotate(90deg); left: 28px; color: #3a70ca;}.swiper-button-next:after,.swiper-button-prev:after { font-size: 25px;}.sub_title { margin-left: 15px; margin-top: -19px;}.step-num { display: inline-block; height: 2px; width: 2px; color: #fff; background-color: #3a70ca; line-height: 30px; border-radius: 50%; text-align: center; border: 2px solid #3a70ca; margin-top: 36px;}.step-num:after { content: ''; width: 2px; height: 84px; border-left: 1.5px dotted #3a70ca; /* background-color: #3a70ca; */ position: absolute; top: 0px; margin-left: -1px;}</style>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持好吧啦网。