如何正確在Vue框架裡使用Swiper

2021-10-01 17:23:07 字數 575 閱讀 9699

第一步:安裝  npm i swiper (vue外掛程式自帶)

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

import swiper from 'swiper';

import 'swiper/css/swiper.min.css';

swiper.min.css的位址在node_modules下面,注意別引用錯誤 

第三步:寫html部分**,其實可以去swiper官網copy**,例如:

slide 2

slide 3

slide 4

slide 5

slide 6

slide 7

slide 8

slide 9

slide 10

第五步:vue初始化請求裡新增該方法,動態載入的資料,要在載入完資料後重新new一下

new swiper('.swiper-container', ,

});

還可以直接在data裡設定一下,看傳送門:

第四部:

正確使用Vue裡的nextTick方法

使用swiper做乙個移動端輪播外掛程式,需要先非同步動態載入資料後,然後使用v for渲染節點,再執行外掛程式的滑動輪播行為。解決這個問題,我們通過在元件中使用vm.nexttick來解決這一需求。一 vm.nexttick callback 二 vue.nexttick callback,con...

專案中如何正確使用開源框架

前天發了一篇文章 如何選擇開源專案?廣受大家喜愛,其實我們在使用開源專案的過程中有不少注意的事項,今天就來給大家補充下 如何正確的使用開源專案?如果你是個人練手專案,那隨你心情,想怎麼用怎麼用,沒啥需要強調的注意事項,本篇文章僅是以在商業專案採用開源庫做介紹。1.使用成熟穩定的開源專案 現在技術日新...

vue使用textare如何正確統計輸入字元個數

但是輸入之後刪除其中乙個,就可以正確顯示,比較坑的。v model consultation.description id description class weui textarea placeholder 請概要描述您看到的現象,最大允許輸入500字 rows 12 keyup textare...