Vue框架里使用Swiper的方法示例
更新時(shí)間：2018年09月20日 09:53:42 作者：etemal_bright
這篇文章主要介紹了Vue框架里使用Swiper的方法示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
下載swiper
首先使用npm 或者cnpm下載swiper
cnpm install swiper
引入swiper
import Swiper from ‘swiper'; import ‘swiper/dist/css/swiper.min.css';
使用swiper
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="../../static/images/ad1.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="../../static/images/ad2.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="../../static/images/ad3.jpg" alt="">
</div>
</div>
</div>
mounted里面調(diào)用
mounted(){
var mySwiper = new Swiper('.swiper-container', {
autoplay:true,
loop:true
})
},
注意
如果想要從后臺(tái)請(qǐng)求圖片放上去 new Swiper要寫在網(wǎng)絡(luò)請(qǐng)求成功的函數(shù)里面，否則不會(huì)出來數(shù)據(jù)。
slider組件的內(nèi)容如下：
<template>
<swiper :options="swiperOption" ref="mySwiper">
<!-- slides -->
<swiper-slide v-for="(picitem,index) in items" :key="index">
<img :src="picitem.src" alt="">
</swiper-slide>
</swiper>
</template>
<script type="text/ecmascript-6">
import {swiper, swiperSlider} from 'vue-awesome-swiper'
export default {
data() {
return {
swiperOption: {
notNextTick: true,
loop: true,
autoplay: true,
speed: 1000,
direction: 'horizontal',
grabCursor: true,
setWrapperSize: true,
autoHeight: true,
pagination: '.swiper-pagination',
paginationClickable: true,
mousewheelControl: true,
observeParents: true,
debugger: true
},
items: [
{src: 'http://localhost/static/images/1.jpg'},
{src: 'http://localhost/static/images/2.jpg'},
{src: 'http://localhost/static/images/3.jpg'},
{src: 'http://localhost/static/images/4.jpg'},
{src: 'http://localhost/static/images/5.jpg'}
],
}
},
components: {
swiper,
swiperSlider
}
}
</script>
<style lang="stylus" rel="sheetstylus">
</style>
解釋一下：autoplay:true這樣可以解決不自動(dòng)輪播問題。如果想設(shè)置滾動(dòng)的時(shí)間，用speed設(shè)置相應(yīng)時(shí)間即可。direction可以設(shè)置輪播的方向。具體的參數(shù)可參考swiper的官網(wǎng)地址：http://www.swiper.com.cn/api/Effects/2015/0308/193.html
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue封裝Axios請(qǐng)求和攔截器的步驟，幫助大家更好的對(duì)axios進(jìn)行封裝并將接口統(tǒng)一管理，同時(shí)為請(qǐng)求和響應(yīng)設(shè)置攔截器interceptors。，感興趣的朋友可以了解下2020-09-09
淺談Vue內(nèi)置component組件的應(yīng)用場(chǎng)景
這篇文章主要介紹了淺談Vue內(nèi)置component組件的應(yīng)用場(chǎng)景，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-03
Vue項(xiàng)目打包問題詳解(生產(chǎn)環(huán)境樣式失效)
在Vue開發(fā)過程中,項(xiàng)目的打包是一個(gè)非常重要的步驟,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目打包問題(生產(chǎn)環(huán)境樣式失效)的相關(guān)資料,文中介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
Vue 引入AMap高德地圖的實(shí)現(xiàn)代碼
這篇文章主要介紹了Vue 引入AMap高德地圖的實(shí)現(xiàn)代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
在這里就不過多說watch的用法了，這篇文章主要通過案例帶大家了解一下如何清除過期的副作用。文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以了解一下2023-01-01
前端Vue中常用rules校驗(yàn)規(guī)則(輪子)如電話身份證郵箱等校驗(yàn)方法例子
當(dāng)我們?cè)陂_發(fā)應(yīng)用時(shí)經(jīng)常需要對(duì)表單進(jìn)行校驗(yàn),以確保用戶輸入的數(shù)據(jù)符合預(yù)期,這篇文章主要給大家介紹了關(guān)于前端Vue中常用rules校驗(yàn)規(guī)則(輪子)如電話身份證郵箱等校驗(yàn)方法的相關(guān)資料,需要的朋友可以參考下2023-12-12
我們通過實(shí)例代碼給大家分享了Vue中watch的高級(jí)用法，對(duì)此知識(shí)點(diǎn)有需要的朋友可以跟著學(xué)習(xí)下。2018-05-05
這篇文章主要介紹了關(guān)于vue-router路徑計(jì)算問題，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-05-05
這篇文章主要介紹了關(guān)于VueSSR的一些理解和詳細(xì)配置，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
vue 實(shí)現(xiàn)左右拖拽元素并且不超過他的父元素的寬度
這篇文章主要介紹了vue 實(shí)現(xiàn)左右拖拽元素并且不超過他的父元素的寬度,需要的朋友可以參考下2018-11-11