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>
复制代码