分享vue里swiper的一些坑

更新時間：2018年08月30日 14:10:25 作者：風雪Shang

這篇文章主要介紹了vue里swiper的一些坑及swiper在vue中的使用,本文分步驟給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下

實例: 錯誤(無法顯示出分頁器按鈕,此功能不適用與for循環(huán)出來的圖片,只有當該頁面圖片固定幾張時能正常用)

第一步: 安裝 npm i swiper (vue插件自帶)

第二步: 在當前頁面里引入

import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css';

第三步:當然吶,或許你在想內(nèi)容吶,別急,為了大家的方便內(nèi)容的寫法我也會提供

<html代碼>
<div class="swiper-container">
　　<div class="swiper-wrapper">
　　　　<div class="swiper-slide" v-for="item in swiperitem"><img :src="item.thumb"></div>(for循環(huán))(tip: 可以把for循環(huán)換成正常展示圖片,如下面展示方法,每張圖對應的放進去,分頁器是可以用的,for循環(huán)這樣分頁器是無法顯示與切換的)
　　　　< !--<div class="swiper-slide"><img src="http://cdn.qcacg.com//img/Illustration/11_02.jpg"></div>-->(當然,你也可以根據(jù)上面for循環(huán)里有幾條數(shù)據(jù)添加幾個這個div,img路徑可有可無,有也不會展示,分頁器是根據(jù)swiper-slide判斷顯示與切換輪播的)
　　</div>
　　<div class="swiper-pagination swiprRem"></div>(分頁器)
 </div>
<js>

vue初始化請求里添加該方法

mounted () {
　　var that = this;
　　that.$nextTick(function(){
　　　　var mySwiper = new Swiper(".swiper-container",{ 
　　　　　　direction:"horizontal",/*橫向滑動*/ 
　　　　 　　loop:true,形成環(huán)路（即：可以從最后一張圖跳轉(zhuǎn)到第一張圖 
　　　　　　pagination:".swiper-pagination",/*分頁器*/ 
　　　　 　　autoplay:3000/*每隔3秒自動播放*/ 
　　　　});
　　})
 },

css就不多說了,控制大小應該都會.

接下來說第二個正確且簡單的方法

正確:

第一步: 安裝 npm i vue-awesome-swiper --save( 這一個是否安裝根據(jù)實際情況,如果安裝上一個你用沒效果也要安裝這個 => npm i swiper )

第二步: 在main.js文件里引入

import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)

在當前頁面引入

import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css';

第三步;

<html>
<swiper :options="swiperOption">
　　<swiper-slide v-for="items in allData.bannerphoto" key="items">
　　　　<img :src="items" alt="">
　　</swiper-slide>
　　<div class="swiper-pagination" slot="pagination"></div> (分頁器)
</swiper>

在data里定義輪播圖

swiperOption: {
　　pagination: '.swiper-pagination',
　　paginationClickable: true,
　　autoplay: 2500,
　　autoplayDisableOnInteraction: false,
　　loop: false,
　　coverflow: {(輪播圖切換方式)
　　　　rotate: 30,
　　　　stretch: 10,
　　　　depth: 60,
　　　　modifier: 2,
　　　　slideShadows : true
　　}
},

關于swiper在vue里的分享就到這里了,各位用的感覺闊以的幫忙點個贊唄,畢竟寫了這么多,嘿嘿.關于swiper常用的目前踩到的坑就在這里,后續(xù)有會持續(xù)更新喲

補充一下：swiper在vue中的用法

首先通過npm i vue-awesome-swiper --save 來在vue中下載插件

然后再main.js中引入

require('swiper/dist/css/swiper.css')
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)

接著在需要用到的組件里結構中插入代碼

<div class="banner">
 <swiper :options="swiperOption">
 <swiper-slide v-for="items in allData.bannerphoto" key="items">
 <img :src="items" alt="">
 </swiper-slide>
 <div class="swiper-pagination" slot="pagination"></div>
 </swiper>
 <div class="jc"></div>
 </div>

然后在data中定義輪播圖

swiperOption: {
 pagination: '.swiper-pagination',
 paginationClickable: true,
 autoplay: 2500,
 autoplayDisableOnInteraction: false,
 loop: false,
 coverflow: {
　　rotate: 30,
　　stretch: 10,
　　depth: 60,
　　modifier: 2,
　　slideShadows : true
　　}
 },

此時的coverflow是輪播圖切換的方式更改屬性可切換輪播模式

總結

以上所述是小編給大家介紹的vue里swiper的一些坑，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

vue
swiper

基于Vue如何封裝分頁組件
使用Vue做雙向綁定的時候，可能經(jīng)常會用到分頁功能，接下來通過本文給大家分享一個封裝分頁組件的方法，一起看看吧
2016-12-12
Vue3使用hooks函數(shù)實現(xiàn)代碼復用詳解
這篇文章主要介紹了Vue3使用hooks函數(shù)實現(xiàn)代碼復用詳解，Vue3的hook函數(shù)可以幫助我們提高代碼的復用性,?讓我們能在不同的組件中都利用hooks函數(shù)
2022-06-06
分享7個成為更好的Vue開發(fā)者的技巧
作為使用Vue已經(jīng)很多年的人，特別是去年一直在使用?Vue3，因此，學到了很多東西。所以本文為大家準備了7個讓我們成為更好?Vue?開發(fā)者的技巧，需要的可以參考一下
2022-06-06
基于Electron+Vite快速構建Vue3桌面應用
這篇文章主要介紹了如何基于Electron和Vite快速構建Vue3桌面應用，本文主要技術棧就是Vue3、vite、Electron，文中有詳細的代碼示例,需要的朋友可以參考下
2023-07-07
Vue下的國際化處理方法
下面小編就為大家分享一篇Vue下的國際化處理方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2017-12-12
詳解使用vuex進行菜單管理
本篇文章主要介紹了詳解使用vuex進行菜單管理，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-12-12
15 分鐘掌握vue-next響應式原理
這篇文章主要介紹了15 分鐘掌握vue-next響應式原理,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-10-10
vue跳轉(zhuǎn)頁簽傳參并查詢參數(shù)的保姆級教程
這篇文章主要介紹了vue跳轉(zhuǎn)頁簽傳參并查詢參數(shù)的保姆級教程,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2023-04-04
vue數(shù)據(jù)更新UI不刷新顯示的解決辦法
這篇文章主要介紹了vue數(shù)據(jù)更新UI不刷新顯示的解決辦法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-08-08
axios實現(xiàn)文件上傳并獲取進度
這篇文章主要為大家詳細介紹了axios實現(xiàn)文件上傳并獲取進度，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-09-09