项目之swiper

第一步肯定是安装这个库

npm i swiper --save

安装完成之后，因为是热门板块上的内容，所以在热门板块上使用

<template>
    <div class="hot">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="./../../imgs/rowing/s1.png" width="100%"></div>
                <div class="swiper-slide"><img src="./../../imgs/rowing/s2.png" width="100%"></div>
                <div class="swiper-slide"><img src="./../../imgs/rowing/s3.png" width="100%"></div>
                <div class="swiper-slide"><img src="./../../imgs/rowing/s4.png" width="100%"></div>
                <div class="swiper-slide"><img src="./../../imgs/rowing/s5.png" width="100%"></div>
                <div class="swiper-slide"><img src="./../../imgs/rowing/s6.png" width="100%"></div>
                <div class="swiper-slide"><img src="./../../imgs/rowing/s7.png" width="100%"></div>
            </div>
             <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
        </div>
        <HotNav />
    </div>
</template>

<script>

    import HotNav from './HotNav'
    import Swiper from 'swiper'
    import 'swiper/dist/css/swiper.min.css'

    export default{
        name:"Hot",
        mounted(){
            new Swiper ('.swiper-container', {
                autoplay:true,
                loop: true, // 循环模式选项
                pagination: {
                    el: '.swiper-pagination',
                        },
                    })        
                 },
        components:{
            HotNav
        }
                      }
</script>

<style scoped lang="stylus" ref="stylesheet/stylus">
    .hot
        width 100%
        height 100%
        padding-top 46px      //设置padding就是为了把这个板块的内容撑下来，头部的导航条的高度刚好就是46px
        background #f5f5f5

</style>

首先先导入库还有所需要的css库
然后就是要初始化组件，初始化的阶段就是在mounted阶段最合适
最后对轮播图做width:100%处理就好了 高度也会等比例缩小