1.創(chuàng)建分支
在git上創(chuàng)建分支-index-swipper用于首頁輪播圖的制作巍举,此時(shí)github項(xiàng)目上有兩個(gè)分支畴嘶,分別是 main和index-swipper蛋逾,但是本地倉庫還沒有創(chuàng)建分支,就需要使用給i他命令把遠(yuǎn)程倉庫中內(nèi)容拉取過來窗悯。
*除了分支名字swipper拼錯(cuò)了 后面都是swiper
git pull
git checkout index-swipper //切換到swipper分支上
git status //查看當(dāng)前所在分支
2.使用插件制作輪播圖
npm install vue-awesome-swiper@2.6.7 --save
3.頁面抖動問題
在調(diào)試工具處把network設(shè)置為fast3G后刷新頁面区匣,發(fā)現(xiàn)在圖片還沒加載出來之前test已經(jīng)跑到了上部,這在網(wǎng)速不好的時(shí)候出現(xiàn)很明顯的抖動感
【我測試的時(shí)候沒有出現(xiàn)抖動 切換成slow3G也沒有出現(xiàn)(蒋院?) 但還是簡單學(xué)習(xí)一下處理方法】
寫法一:在輪播圖的外面用wrapper的class包裹起來亏钩,設(shè)置它的寬度為100%莲绰,高度為0,padding-bottom為55%會自動撐開(與width相比)的55%的高度姑丑。它不能寫在height里钉蒲,寫在height里表示對應(yīng)父級元素的55%。
.wrapper
width: 100%
height: 0
overflow: hidden
//圖片的寬高比是55% 設(shè)置后會自動撐開55%的距離
padding-bottom: 55%
background: #ccc //在圖片沒有顯示出來前加一個(gè)灰色背景
寫法二:
.wrapper
width: 100%
height: 55%vw //兼容性不好
4.scoped局限下的穿透【彻坛?不懂】
scoped模式只能改變當(dāng)前組件里的樣式 (顷啼?)
wrapper下的所有swiper-pagination-bullet顏色都設(shè)置成白色。
.wrapper >>> .swiper-pagination-bullet
background: #fff !important
5.分支合并
git add .
git commit -m "add swiper"
git push //push到index-swipper分支
git checkout main //先切換到main分支上
git merge origin/index-swipper //把main分支和index-swipper 分支合并
git push //把main推到線上
此時(shí)index-swipper放置的開發(fā)的具體功能昌屉,測試沒問題后再跟主分支合并 -》項(xiàng)目完成