vue-awesome-swiper 插件

最新推荐文章于 2024-09-13 21:49:06 发布

weixin_30325487

最新推荐文章于 2024-09-13 21:49:06 发布

阅读量102

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/jianxian/p/11060152.html

博客介绍了Swiper版本区分组件和普通版本，还给出了在Vue中配置Swiper的步骤，包括使用npm安装vue-awesome-swiper，在main.js里全局引入以及在组件里引入，还提及了template和数据相关配置。

Swiper 版本区分了组件和普通版本

（1）npm install vue-awesome-swiper –save

（2）在 main,js 里引入（全局）:

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

（3）组件里引入 :

import ‘swiper/dist/css/swiper.css’ //在全局没引入，这里记得要！ 
import { swiper, swiperSlide } from ‘vue-awesome-swiper’

export default {
  components: {
    swiper,
    swiperSlide
  }
}

配置

（4）template

<swiper :options="swiperOption">
    <swiper-slide>I'm Slide 1</swiper-slide>
    <swiper-slide>I'm Slide 2</swiper-slide>
    <swiper-slide>I'm Slide 3</swiper-slide>
    <div class="swiper-pagination"  slot="pagination"></div> </swiper>

（5）数据

 data(){
    return{
        swiperOption: {
          pagination:{
            el:'.swiper-pagination'
          },
          autoplay:{
              delay:1000,
              disableOnInteraction:false
          }
          swiper参数
      }
    }
  }

转载于:https://www.cnblogs.com/jianxian/p/11060152.html