第一步:安裝 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...