温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

基于vue.js轮播组件vue-awesome-swiper实现轮播图的示例分析

发布时间:2021-07-06 14:35:23 来源:亿速云 阅读:375 作者:小新 栏目:web开发

这篇文章主要为大家展示了“基于vue.js轮播组件vue-awesome-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实现轮播图的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI