跟我一起做乙個vue的小專案(四)

2022-01-11 10:16:07 字數 771 閱讀 2952

接下來我們進行的是輪播頁面下面的導航頁的開發

我們需要的是實現輪播頁下面的圖示,並且實現輪播效果

這個話,其實基本思路先是渲染出小圖示,然後,我們要對頁數進行判斷,如果圖示的個數展示的就是8個,那個這個就是一頁輪播

如果大於8個,我們要計算是顯示幾個輪播頁。再根據這個輪播頁我們去渲染的資料

}     

接下來我們封裝乙個字數多了就顯示省略號的寫法

新建 mixins.styl

ellipsis()

overflow:hidden

white-space:nowrap

text-overflow:ellipsis

在我們的**中進行引用即可

其實這個裡面比較繞的應該是對輪播頁數的處理,具體的圖示個數是不定的,所以頁數是不定的。

我們看下頁面的最終效果

跟我一起做乙個vue的小專案(十一)

接下來我們進行的是詳情頁動態路由及banner布局 先看頁面的效果 下面是 部分 故宮 aaaaa景區 39 接下來我們進行畫廊元件的封裝 首先修改webpack.base.conf.js檔案 接下來我們進行gallery元件的封裝 點選我們的banner圖,會進入gallery元件裡面,點選gal...

跟我一起寫 Makefile(四)

書寫規則 規則包含兩個部分,乙個是依賴關係,乙個是生成目標的方法。在makefile中,規則的順序是很重要的,因為,makefile中只應該有乙個最終目標,其它的目標都是被這個目標所連帶出來的,所以一定要讓make知道你的最終目標是什麼。一般來說,定義在makefile中的目標可能會有很多,但是第一...

跟我一起寫 Makefile(四)

書寫規則 規則包含兩個部分,乙個是依賴關係,乙個是生成目標的方法。在makefile中,規則的順序是很重要的,因為,makefile中只應該有乙個最終目標,其它的目標都是被這個目標所連帶出來的,所以一定要讓make知道你的最終目標是什麼。一般來說,定義在makefile中的目標可能會有很多,但是第一...