| 本文实例为大家分享了vue+swiper实现时间轴效果的具体代码，供大家参考，具体内容如下 效果： 
首先引入，有淘宝镜像的用 cnpm install swiper --save 没有的用 npm install swiper --save <template> <div class="hello" style="height:100%;width:100%;position:relative;"> <div class="swiperlist"> <div class="swipers"> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide" 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 class="buttom" 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>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持wanshiok.com。
vue实现物流时间轴效果
Vue.js实现时间轴功能 |
