本文實例為大家分享了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>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。