vue项目中使用swiper 实现无缝滚动

1.安装swiper组件

npm install vue-awesome-swiper --save

2.main.js里 引入组件，css(自己写样式的话 则不用引)

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)

3.在组件里引入

import { swiper, swiperSlide } from 'vue-awesome-swiper'

4.配置项

export default {
  data(){
    return {
      newsList:[
        {
          title:"武汉市xxx餐饮集团有限公司",
          pubDate:"2019-08-08"
        },
        {
          title:"上海市xxx餐饮集团有限公司",
          pubDate:"2019-08-07"
        },
        {
          title:"上海市xxx餐饮集团有限公司",
          pubDate:"2019-08-05"
        },
        {
          title:"上海市xxx餐饮集团有限公司",
          pubDate:"2019-08-03"
        },
        {
          title:"上海市xxx餐饮集团有限公司",
          pubDate:"2019-08-02"
        },
        {
          title:"上海市xxx餐饮集团有限公司",
          pubDate:"2019-08-01"
        },
        {
          title:"上海市xxx餐饮集团有限公司",
          pubDate:"2019-07-02"
        },
        {
          title:"上海市xxx餐饮集团有限公司",
          pubDate:"2019-06-01"
        }
      ],
     swiperOption: {                     //swiper无缝滚动配置项
        notNextTick: true,
        direction:'vertical',
        speed:1500,//滚动速度
        setWrapperSize: true,
        freeMode:true,//true则是自由模式，不会自动贴合滑动位置
        autoplay:{
          delay:1,
          autoplayDisableOnInteraction:false
        },
        loop:true,//循环
      　 observer:true,//修改swiper自己或子元素时，自动初始化swiper 
　　     observeParents:true,//修改swiper的父元素时，自动初始化swiper  
        spaceBetween:4,//slide之间的距离（单位px）
        slidesPerView:6 //slide可见数量
      }
    }
  },
  components: {
    swiper,
    swiperSlide
  }
}

HTML：

   
     
       {{slide.title}}
       {{slide.pubDate}}
     
   

修改css

需要把scoped设置给去掉不然，会导致 transition-timing-function:linear；设置不生效