swiper 的使用

 

全局引入

 

CDN 模式，在 index.html 直接使用。

 

   <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">

 

   <script src="https://unpkg.com/swiper/js/swiper.min.js"> </script>

 

      //引入

 

   <div class="swiper-container">

 

       <div class="swiper-wrapper">

 

        <img src="/static/images/topic_1_b.png" class="swiper-slide"/>

 

        <img src="/static/images/topic_1_b.png" class="swiper-slide"/>

 

        <img src="/static/images/topic_1_b.png" class="swiper-slide"/>

 

       </div>

 

   </div>

 

   //初始化，必须在 挂载阶段。

 

   mounted() {

 

    new Swiper('.swiper-container', {

 

          slidesPerView: 'auto',

 

          spaceBetween: 30,

 

          pagination: {

 

            el: '.swiper-pagination',

 

            clickable: true,

 

          },

 

    });

 

   }

 

vue-awesome-swiper的使用 (暂未有时间，有空编写)

 

背景图片为动态时

 

    <template>

 

        <div class="header" :style=" ——background: url(${ bck_url }) center no-repeat;——">

 

        </div>

 

    </template>

 

当背景图片为动态且 图片路径为 src 下, 引入时 , vue 会不解析 图片地址。而 还是 字符串

 

正常情况下，例如 header.png 图片 会解析为 header_3.4e7ddc9.png ,

 

解决方法：

 

- 图片放在静态资源下， ——static—— 下