Back

vuejs - 使用轮播图: vue-awe-some-slider

发布时间: 2017-08-05 02:21:00

参考:  https://surmon-china.github.io/vue-awesome-swiper/

步骤:

1. package.json; 

添加到 dependencies 中: "vue-awesome-swiper": "^2.5.4"

或者先运行命令: cnpm install vue-awesome-swiper --save --verbose    

2. src/main.js: 

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

3. 在对应的视图文件中,增加视图:

      <swiper :options="swiperOption" ref="mySwiper">
        <!-- slides -->
        <swiper-slide v-for="image in good_images"
          v-bind:style="{backgroundImage: 'url(' + image + ')'}"
          style='width:100%; height: 270px;
          background-position: center center;
          background-size: cover;
          '
          >
        </swiper-slide>
        <!-- Optional controls -->
        <div class="swiper-pagination"  slot="pagination">
        <div class="swiper-scrollbar"   slot="scrollbar">
      </swiper>

import { swiper, swiperSlide } from 'vue-awesome-swiper'

data() { 
     return  { 
               // 在页面中，定义这个常量：　swiperOptions
                swiperOption: {
                  notNextTick: true,
                  autoplay: 1000,
                  direction : 'horizontal',
                  autoHeight: true,
                  pagination : '.swiper-pagination',
                  paginationClickable :true,
                  scrollbar:'.swiper-scrollbar',
                  observeParents:true,
                  // if you need use plugins in the swiper, you can config in here like this
                  // 如果自行设计了插件，那么插件的一些配置相关参数，也应该出现在这个对象中，如>
                  debugger: true,
                  // swiper callbacks
                  // swiper的各种回调函数也可以出现在这个对象中，和swiper官方一样
                  onTransitionStart(swiper){
                    console.log(swiper)
                  },
                  loop: true,
                  autoplay: 2500,
                  // more Swiper configs and callbacks...
                  // ...
                }

        mounted () {
               // 初始化轮播图
               this.swiper.slideTo(1, 1000, false)
               // 开始自动播放
               this.swiper.startAutoplay()
                       }, 
        components: {
          swiper,
          swiperSlide
        },
        computed: {
          swiper() {
            return this.$refs.mySwiper.swiper
          }
        }

Back