如何在VUE中使用vue-awesome-swiper
一:首先進(jìn)入項(xiàng)目目錄中安裝
install vue-awesome-swiper@2.6.7 --save
二.使用
全局掛載:
import Vue from 'vue' import VueAwesomeSwiper from 'vue-awesome-swiper' // require styles import 'swiper/dist/css/swiper.css' Vue.use(VueAwesomeSwiper, /* { default global options } */)
組件掛載
// require styles import 'swiper/dist/css/swiper.css' import { swiper, swiperSlide } from 'vue-awesome-swiper' export default { components: { swiper, swiperSlide } }
新建一個(gè).vue文件,按照以下代碼模式
<template> <div class="index"> <Top navLeft="true" title="輪播圖" navRight="false"></Top> <div style="padding-top: 1.3rem;padding-left:0.2rem"> <swiper id="mySwiper" :options="swiperOption" ref="mySwiper" v-if="swiperList.length!=0"> <swiper-slide class="swiper-item" v-for='(item,index) of swiperList' :key='item.id' > <img class='swiper-img' :src='item.imgUrl' alt="門票" @click="swiperClick(index,item.linkUrl)" /> </swiper-slide> <div class="swiper-pagination" slot="pagination"></div> </swiper> </div> </div> </template> <script> import Top from '@/components/public/Top'; import 'swiper/dist/css/swiper.css'; import { swiper, swiperSlide } from 'vue-awesome-swiper' export default { name: 'Swiper', components: {Top,swiper,swiperSlide}, data() { return { swiperList:[], swiperOption: { pagination: ".swiper-pagination", initialSlide: 0,//默認(rèn)第幾張 loop:true, //循環(huán) autoplayDisableOnInteraction:false,//觸摸后再次自動(dòng)輪播 autoplay:2000, //每張播放時(shí)長(zhǎng)3秒,自動(dòng)播放 speed:1000,//滑動(dòng)速度 } } }, created(){ this.initEvent(); console.log(this.$refs.mySwiper); this.swiperOption.autoplay = this.swiperList.length != 1 ? 2000 : false;//如果是一張圖片不輪播 }, computed: { swiper() { return this.$refs.mySwiper.swiper//組件實(shí)例 } }, mounted(){ }, methods: { initEvent:function(){ this.$http.get("http://localhost/swiper") .then(res=>{ this.swiperList=res.data.swiperList; }) .catch(error=>{ console.log(error) }) }, swiperClick:function(index,url){ console.log(index); this.$router.push(url) } } } </script> <style scoped> @import "../assets/public/css/bottom.css"; @import "../assets/css/index/my.css"; #mySwiper >>> .swiper-pagination-bullet { background: #000000; } #mySwiper >>> .swiper-pagination-bullet-active { background: #ff0000; } </style>
頁(yè)面展示如下
三:在使用過(guò)程中遇到的問(wèn)題
1.觸摸后再次自動(dòng)輪播問(wèn)題,添加以下屬性就可以再次輪播
autoplayDisableOnInteraction:false
2.樣式穿透問(wèn)題,修改圓點(diǎn)的樣式問(wèn)題
解決方案是給swiper容器添加上ID,然后再在后面添加>>>,這樣就可以解決了
#mySwiper >>> .swiper-pagination-bullet { background: #000000; } #mySwiper >>> .swiper-pagination-bullet-active { background: #ff0000; }
3.解決如果只有一張圖片不輪播問(wèn)題
以上就是如何在VUE中使用vue-awesome-swiper的詳細(xì)內(nèi)容,更多關(guān)于VUE中使用vue-awesome-swiper的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
- vue中swiper?vue-awesome-swiper的使用方法及各種坑解決
- 使用Vue-Awesome-Swiper實(shí)現(xiàn)旋轉(zhuǎn)疊加輪播效果&平移輪播效果
- vue-awesome-swiper 基于vue實(shí)現(xiàn)h5滑動(dòng)翻頁(yè)效果【推薦】
- vue awesome swiper異步加載數(shù)據(jù)出現(xiàn)的bug問(wèn)題
- vue引入新版 vue-awesome-swiper插件填坑問(wèn)題
- 解決使用vue-awesome-swiper組件手動(dòng)滾動(dòng)點(diǎn)擊失效問(wèn)題
相關(guān)文章
Vue實(shí)現(xiàn)動(dòng)態(tài)路由的示例詳解
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)動(dòng)態(tài)路由的相關(guān)知識(shí),主要涉及到兩個(gè)方面:一是路由的動(dòng)態(tài)添加,二是基于路由的參數(shù)變化來(lái)動(dòng)態(tài)渲染組件,下面就跟隨小編一起深入學(xué)習(xí)一下動(dòng)態(tài)路由的實(shí)現(xiàn)吧2024-02-02vue項(xiàng)目ElementUI組件中el-upload組件與圖片裁剪功能組件結(jié)合使用詳解
這篇文章主要介紹了vue項(xiàng)目ElementUI組件中el-upload組件與圖片裁剪功能組件結(jié)合使用,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03Vue中靈活拖拽的前端神器VueDraggablePlus的用法詳解
這篇文章主要介紹了一款功能強(qiáng)大、靈活易用的前端組件VueDraggablePlus,作為前端工程師,我們經(jīng)常會(huì)遇到需要實(shí)現(xiàn)拖拽功能的場(chǎng)景,而VueDraggablePlus正是為了解決這一痛點(diǎn)而誕生的,讓我們一起來(lái)看看它的特點(diǎn)和用法吧2024-03-03