项目中有一个横向滚动的需求，用到了swiper，看看如何实现它。
1.首先在页面中引入swiper
import Swiper from "swiper"
2.在css中引入
@import "../../node_modules/swiper/dist/css/swiper.css";.swiper-container{height: 80px;padding-left: 56px;background-image: -webkit-radial-gradient(23% 100%, #2e79c3 0%, #297bc4 100%);}.swiper-slide{width: auto!important;display: inline-block;margin-right: 40px;height: 80px;line-height: 80px;font-size: 32px;padding: 0 15px;-webkit-box-sizing: border-box;box-sizing: border-box;text-align: center;color: #fff;cursor: pointer;}.swiper-container .swiper-slide .active {color: #666;background-color: #fff8eb;box-shadow: 0 3px 13px 0 rgba(94, 94, 94, 0.50);}
加入html
<div class="swiper-container" ref="slider"><div class="swiper-wrapper"><div class="swiper-slide">Slide 1</div><div class="swiper-slide">Slide 2</div><div class="swiper-slide">Slide 3</div><div class="swiper-slide">Slide 4</div><div class="swiper-slide">Slide 5</div></div></div>
4.一定要在 mounted 里面引入方法
var swiper = new Swiper('.swiper-container', {slidesPerView: 5,freeMode: true,loop:false});
一番操作后就可以在实现一个横向滚动功能~
