vue-awsome-swiper 使用跳坑

開始引入

• main.js 引入

import swiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(swiper)
複製代碼

• 組件引入

import {swiper, swiperSlide} from 'vue-awesome-swiper'
複製代碼

• 組件應用
  組件引入和普通版swiper有區別要放在slot中,因此不能放到swiper外...

<swiper-slide v-for="item in list" :key="item">
                   <div>
                        <img src="https://placem.at/people?w=840&h=280" alt=""  >
                        <div class="title">{{item.title}}</div>
                   </div>
               </swiper-slide>

               <!-- Optional controls 控制組件引入-->
               <div class="swiper-pagination"  slot="pagination"></div>
                <div class="swiper-button-prev" slot="button-prev"></div>
                <div class="swiper-button-next" slot="button-next"></div>
                <div class="swiper-scrollbar"   slot="scrollbar"></div> 
             </swiper>
複製代碼

• 組件設置問題
  應用swiper4 的語法進行設置,否則有坑

swiperOption: {
                autoplay: {
                    delay: 3000,
                    stopOnLastSlide: false,
                    disableOnInteraction: true
                },
                loop: true,
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true
                    bulletClass: 'my-bullet'
                }
複製代碼

• 自定義class
  必定不要添加scoped
  不然不能渲染到總體dom中,注意class命名不要衝突

<style lang="stylus">//自定義樣式不加scoped
    .swiper-pagination-bullet
            // width 10px
            // height 10px
            background #fff
</style>
複製代碼