「Vue — 插件」轮播图vue-awesome-swiper

1：安装 cnpm install vue-awesome-swiper@3 --save-dev cnpm install swiper@3 2：在main.js中

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

3：在需要使用的页面中

1<template>
2  <div id="video-list">
3    <swiper :options="swiperOption">
4        <!-- 幻灯内容 -->
5        <swiper-slide>slide1</swiper-slide>    
6        <swiper-slide>slide2</swiper-slide> 
7        <swiper-slide>slide1</swiper-slide>    
8        <swiper-slide>slide2</swiper-slide> 
9    </swiper>
10  </div>
11</template>
12<script>
13    import { swiper, swiperSlide } from 'vue-awesome-swiper'    //导入组件
14    export default{
15        name:'videoList',
16        components: {
17            swiper, //定义组件
18            swiperSlide
19        },
20        data(){
21            return {
22                swiperOption: {
23                    direction:"vertical",
24                    grabCursor: true, 
25                    setWrapperSize: true, 
26                    autoHeight: true, //自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化
27                    slidesPerView: 1,
28                    mousewheel: true, 
29                    mousewheelControl: true, 
30                    height: window.innerHeight, // 高度设置，占满设备高度
31                    resistanceRatio: 0, 
32                    observeParents: true, 
33                }
34            }
35        },
36     }
37</script>
38<style scoped>
39    #video-list{height: 100%;}
40    #video-list .swiper-container{
41        height: 100%;
42    }
43</style>