制作iVX 低代碼項目需要進入在線IDE:https://editor.ivx.cn/
一、菜單思路參考及制作
在 CSDN 首頁中的菜單部分為一串橫排的內容,并且可以進行拖動:
首先咱們添加一個行,命名為菜單:
接著肯定是需要設置上下的內邊距內容:
接著直接往這個行中添加文本內容即可:
很明顯,當前文本字號與我們所需要的效果差距比較大,設置對應的字號使其大小(13號字體)合適于當前頁面:
由于每個字體都會左右相隔一段距離,那么此時直接設置這個文本的左右內邊距即可:
接著我們復制這個文本在該行中進行顯示:
頁面呈現效果如下:
但是此時內容換行了,我們該怎樣使內容同一行進行顯示呢?并且可以滑動?
此時只需要設置包裹這些文本的行取消換行即可,點擊菜單行,在屬性中把自動換行關閉即可:
接著還需要設置當前這一行的剪切屬性,剪切屬性可以使當前這一行的內容可以滑動,但是會出現滾動條,咱們還需要將滾動條隱藏,使其更加美觀:
效果如下:
此時你再預覽將會發現頁面可以進行滑動。
二、輪播圖制作
菜單欄之后是一個輪播圖:
該輪播圖占據整行,并且自動進行滾動,那如何制作呢?需要通過行和圖片自己設置嗎?這個不需要,咱們只需要再擴展組件中的特殊功能容器找到輪播組件即可:
首先添加一個行,命名為輪播,并且設置高度為 160px 背景色為透明:
接著添加輪播容器:
添加輪播內容后我們發現當前輪播內容超出了父容器高度,此時需要設置這個輪播容器的高度為 100%:
接著給這兩個輪播頁添加對應的對應的背景圖片:
此時頁面效果如下:
那如何增加對應的文本呢?
增加文本內容有兩個方式,其中一種是在這個輪播容器之下新建一個行,在這個行中添加對應的文本。那你可能問,創建一個行不就在下面顯示了,如何可以顯示在當前輪播也之上呢?
其實咱們的行有很多作用,例如在行中設置內容后,設置上的上外邊距為負,那么此時就可以往上移動,這樣就可以覆蓋在這個輪播容器之上了,但是文本卻不能進行輪播,這種方法需要額外的制作很多的事情,例如你要設置動畫,幾秒播放一次,這個還好,更加麻煩的是你還需要設置鼠標拖動時你要如何進行響應,這并不是很劃算,在此只是提供一個不一樣的思路,咱們現在在這個輪播頁中添加文本還是要從整個輪播容器中進行添加。
輪播容器中的輪播頁是一個頁面,那么一個頁也是一個容器,所以咱們可以在這個輪播容器中添加文本內容,但是這個文本內容你還需要控制,最好的方法就是添加一個行,設置其內邊距以及一個對齊方式,這樣就可以很方便的控制文本了。
首先添加一個行命名為文本在這個輪播頁之中:
由于其本身這個行具有背景色,所以導致輪播圖遮擋:
此時直接設置這個行的背景色即可:
此時你可以設置當前行的高度為輪播頁的高度:
再設置垂直方向的對其為底部,這樣內容就會在底部顯示,你添加文本也會在底部顯示:
添加文本后設置其顏色和大小:
現在將會在底部顯示,但是我們不要絕對的底部,此時你可以搜索當前行的高度也可以設置內邊距即可,此時我設置左內邊距以及高度縮小:
此時效果如下: