首页 / js教程

    vue-awesome-swiper轮播插件的使用方法(代码)

    作者:PHP中文网2018-09-15 16:12:37

    本篇文章给大家带来的内容是关于vue-awesome-swiper轮播插件的使用方法(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

    移动端轮播图插件,在使用iview图形界面插件中的carousel组件无法实现触摸滑动后,转而使用vue-awesome-swiper插件

    1.npm安装

    npm i vue-awesome-swiper -S

    我这里安装的是下面的这个版本

    1301321986-5b9b692447b10_articlex.png

    2.使用

    • 全局导入:

    import Vue from 'vue'
    import vueSwiper from 'vue-awesome-swiper'
    /* 样式的话,我这里有用到分页器,就在全局中引入了样式 */
    import 'swiper/dist/css/swiper.css'
    Vue.use(vueSwiper);
    • 组件引入

    import { swiper, swiperSlide } from "vue-awesome-swiper";
    require("swiper/dist/css/swiper.css");
    components: {
      swiper,
      swiperSlide
    },
    • 在template中使用

    <swiper :options="swiperOption" class="swiper-wrap"  ref="mySwiper" v-if="banner.length!=0">
      <swiper-slide v-for="(item,index) in banner" :key="index" >
        <img :src="item.image" alt="" />
      </swiper-slide>
      <!-- 常见的小圆点 -->
      <p class="swiper-pagination"  v-for="(item,index) in banner" :key="index" slot="pagination" ></p>
    </swiper>
    <!-- 显示数字 -->
    <p class="number">{{imgIndex}}/{{detailimages.length}}</p>

    2400721570-5b9b6bf41b2c5_articlex.png

    2253195858-5b9b6c1116b37_articlex.png

    • data中配置

    data() {
        const that = this;
        return {
          imgIndex: 1,
          swiperOption: {
            //是一个组件自有属性,如果notNextTick设置为true,组件则不会通过NextTick来实例化swiper,也就意味着你可以在第一时间获取到swiper对象,假如你需要刚加载遍使用获取swiper对象来做什么事,那么这个属性一定要是true
            notNextTick: true,
            //循环
            loop: true,
            //设定初始化时slide的索引
            initialSlide: 0,
            //自动播放
            autoplay: {
              delay: 1500,
              stopOnLastSlide: false,
              /* 触摸滑动后是否继续轮播 */
              disableOnInteraction: false
            },
            //滑动速度
            speed: 800,
            //滑动方向
            direction: "horizontal",
            //小手掌抓取滑动
            grabCursor: true,
            on: {
              //滑动之后回调函数
              slideChangeTransitionStart: function() {
                /* realIndex为滚动到当前的slide索引值 */
                that.imgIndex= this.realIndex - 1;
              },
            },
            //分页器设置
            pagination: {
              el: ".swiper-pagination",
              clickable: true,
              type: "bullets"
            }
          }
       };
    },

    3.遇见的问题

    • 这个插件,在图片只有一张时,仍然会自动滚动

    这里很需要注意的一点就是,如果你直接设置autoplay为true的话,在你触摸滑动图片后,他就不会再自动滚动了
    /* 这里我是在使用接口请求后,对返回的数据进行判断 */
    created() {
      this.$Request({
        url: '',
        method: 'get',
        success: res => {
          this.swiperOption.autoplay = res.result.data.length != 1 ? {
            delay: 1500,
            stopOnLastSlide: false,
            disableOnInteraction: false
            } : false;
         }
      })
    }
    • 在on里面,监听slideChangeTransitionStart方法时,在开始的时候,我用的是activeIndex来设置对应的索引值,这个的话,滑向下一张没有发现问题,后面,自己试着滑向上一张图片,就发现出现问题,这个值不对应了,使用realIndex

    on: {
       slideChangeTransitionStart: function() {
          that.imgIndex = this.realIndex + 1;
       },
    },
    • 在swiper这个容器中,会出现滚动到最后一张图片后就不自动滚动了,以及出现底边的小圆点写了后不显示的问题

    原因是因为this.commodity刚开始数据为[],后来赋值才有值,所以要先判断this.commodity是否为空,这里就在swiper这个容器中进行判断,若数据长度为0,就不显示这个容器
    <swiper class='swiImgs' :options="swiperOption" v-if="commodity.length!=0"></swiper>

    相关推荐:

    vue中如何使用swiper轮播插件来实现轮播图(代码分析)

    有关vue-awesome-swiper插件问题

    以上就是vue-awesome-swiper轮播插件的使用方法(代码)的详细内容,更多请关注php中文网其它相关文章!

    标签:

PHP中文网

未登录