vue實現輪播圖片
本文實例為大傢分享瞭vue實現輪播圖片的具體代碼,供大傢參考,具體內容如下
1、效果圖
2、案例
<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 :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, /* 觸摸滑動後是否繼續輪播 false觸摸後不再點擊繼續輪播,true觸摸後不再點擊不輪播,停在最後一次頁面*/ disableOnInteraction: false }, //滑動速度,時間單位,越小越快,與上面 delay 區別,speed是完成切換所需時間,delay是切換成功後停留多長時間再切換 speed: 800, //滑動方向 direction: "horizontal", //小手掌抓取滑動 grabCursor: true, on: { //滑動之後回調函數 slideChangeTransitionStart: function() { /* realIndex為滾動到當前的slide索引值 */ 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>
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。
推薦閱讀:
- 如何在VUE中使用vue-awesome-swiper
- vue使用swiper插件實現輪播圖的示例
- 解決vue中使用swiper 插件出錯的問題
- Swiper.js插件超簡單實現輪播圖
- Swiper如何實現兩行四列輪播圖效果實例