基于vue.js轮播组件vue-awesome-swiper实现轮播图

 更新时间:2017年03月17日 15:15:22   作者:YIDBoy  
一般做移动端轮播图的时候,最常用的就是Swiper插件了,而vue.js也有一个轮播组件vue-awesome-swiper,用法跟swiper相似。接下来通过本文给大家详解讲解vue.js轮播组件vue-awesome-swiper实现轮播图实例代码,需要的朋友参考下

一般做移动端轮播图的时候,最常用的就是Swiper插件了,而vue.js也有一个轮播组件vue-awesome-swiper,用法跟swiper相似。

1.安装vie-awesome-swiper

nam install vue-awesome-swiper --save-dev

2.引用vie-awesome-swiper组件,这里我是用vie-cli创建的项目,在main.js:

import VueAwesomeSwiper from 'vue-awesome-swiper';
Vue.use(VueAwesomeSwiper) //记得不要忘记这句

3.Home.vue下使用

<template>
<div>
<swiper :options="swiperOption" ref="mySwiperA">
  <!-- 幻灯内容 -->
  <swiper-slide>slide1</swiper-slide>
  <swiper-slide>slide2</swiper-slide>
  <!-- 以下控件元素均为可选 -->
  <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>
</div>
</template>
<script>
  export default{
    data(){
      return {
        swiperOption: {
          // 所有配置均为可选(同Swiper配置) 
          notNextTick: true,
          autoplay: 3000,
          grabCursor : true,
          setWrapperSize :true,
          autoHeight: true,
          pagination : '.swiper-pagination',
          paginationClickable :true,
          prevButton:'.swiper-button-prev',
          nextButton:'.swiper-button-next',
          scrollbar:'.swiper-scrollbar',
          mousewheelControl : true,
          observeParents:true,
          onTransitionStart(swiper){
           console.log(swiper)
          }
      }
    }
  },
  computed: {
    swiper() {
     return this.$refs.mySwiperA.swiper
    }
  },
  mounted() {
    console.log("每次切换都会触发我");
    this.swiper.slideTo(3, 1000, false)
   }
}
</script>

以上所述是小编给大家介绍的基于vue.js轮播组件vue-awesome-swiper实现轮播图,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • vue3+vite+ts使用require.context问题

    vue3+vite+ts使用require.context问题

    这篇文章主要介绍了vue3+vite+ts使用require.context问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • 关于vue data中的this指向问题

    关于vue data中的this指向问题

    这篇文章主要介绍了关于vue data中的this指向问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07
  • Node.js+Vue脚手架环境搭建的方法步骤

    Node.js+Vue脚手架环境搭建的方法步骤

    这篇文章主要介绍了Node.js+Vue脚手架环境搭建的方法步骤,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2020-03-03
  • Vue.js 动态为img的src赋值方法

    Vue.js 动态为img的src赋值方法

    下面小编就为大家分享一篇Vue.js 动态为img的src赋值方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • 对vue中的事件穿透与禁止穿透实例详解

    对vue中的事件穿透与禁止穿透实例详解

    今天小编就为大家分享一篇对vue中的事件穿透与禁止穿透实例详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • vue.js云存储实现图片上传功能

    vue.js云存储实现图片上传功能

    示对象存储是腾讯云提供的一种存储海量文件的分布式存储服务,本文主要介绍了用vue.js实现图片上传功能,感兴趣的小伙伴们可以参考一下
    2021-05-05
  • vue 父组件通过v-model接收子组件的值的代码

    vue 父组件通过v-model接收子组件的值的代码

    这篇文章主要介绍了vue 父组件通过v-model接收子组件的值的代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-10-10
  • 浅谈Vue.js中的v-on(事件处理)

    浅谈Vue.js中的v-on(事件处理)

    本篇文章主要介绍了Vue.js中的v-on(事件处理),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • vue.js实现照片放大功能

    vue.js实现照片放大功能

    这篇文章主要为大家详细介绍了vue.js实现照片放大功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-06-06
  • VUE在for循环里面根据内容值动态的加入class值的方法

    VUE在for循环里面根据内容值动态的加入class值的方法

    这篇文章主要介绍了VUE在for循环里面根据内容值动态的加入class值的方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-08-08

最新评论