如何使用vue实现轮播图片

这篇“如何使用vue实现轮播图片”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“如何使用vue实现轮播图片”文章吧。

效果图

案例

<template>       <section class="body">           <section class="wrap">               <swiper :options="swiperOption" class="swiper-wrap"  ref="mySwiper" v-if="banner.length!=0">                   <swiper-slide v-for="(item,index) in banner" :key="index" >                       //点击图片跳到哪里,这里跳到home页面 item举例：{img:http://www.***.com/home/images/index_img02.png,url:/home}                       <img :class="lazy" data-src="item.img" alt="" @click="skip_out_page(item.url)" />                   </swiper-slide>                   <!-- 常见的小圆点 -->                   <div class="swiper-pagination"  v-for="(item,index) in banner" :key="index" slot="pagination" ></div>               </swiper>           </section>       </section></template>

<script>    export default {        data() {            const that = this;            return {                imgIndex: 1,                swiperOption: {                    //是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true                    notNextTick: true,                    //循环,而不是每次都突然回到第一个                    loop: true,                    //设定初始化时slide的索引，加载页面时显示的第几个，从0开始                    initialSlide: 0,                    //自动播放                    autoplay: {                                                delay: 1500,                        stopOnLastSlide: false,                                                disableOnInteraction: false                    },                    //滑动速度，时间单位，越小越快，与上面 delay 区别，speed是完成切换所需时间，delay是切换成功后停留多长时间再切换                    speed: 800,                    //滑动方向                    direction: "horizontal",                    //小手掌抓取滑动                    grabCursor: true,                    on: {                        //滑动之后回调函数                        slideChangeTransitionStart: function() {                                                        that.imgIndex= this.realIndex - 1;                        },                    },                    //分页器设置                    pagination: {                        el: ".swiper-pagination",                        clickable: true,                        type: "bullets"                    }                },                banner: []            }        },        methods: {            skip_out_page(v) {                window.location.href = v            },            get_data() {                this.$http.get('test').then(res => {                    if(res.data.code == '0000'){                        this.banner = res.data.img_info                    }                });            }        },        mounted() {            this.get_data()        }    }</script>

<style lang="scss">    .swiper-wrap{        width: 100%;        height: 210px;        background-color: #fff;    }    .swiper-pagination{        background: #fff;    }    .swiper-pagination-bullet{        background: #ccc;        width: 10px;        height: 10px;        opacity: 1;    }    .swiper-pagination-bullet-active{        background: #00C293;    }</style>

以上就是关于“如何使用vue实现轮播图片”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注编程网行业资讯频道。