六、二手信息站點頁面制作

在了解了基礎可視組件后，我們可以通過這些可視組件進行站點頁面開發，在此以一個二手交易網站站點頁面為例，本教程示例并不是成熟完善的示例，需要各位讀者進行少量完善，示例只是用于功能講解，了解 iVX 開發項目的一般流程。

本次完成的二手信息站點首頁為信息展示頁面，用戶在發布物品信息時需要登錄賬號。用戶注冊使用了 iVX 自帶的 手機短信驗證碼 進行注冊，在接下來幾節將會詳細的講解所需要使用到的后臺組件。

文章目錄

• 六、二手信息站點頁面制作
• • • 6.1 完成二手交易站點首頁開發
    • • 6.1.1 網站標題頭制作
      • 6.1.2 網站標題頭制作
      • 6.1.3 最新信息內容展示
      • 6.1.4 頁尾完成
      • 6.2.1 登錄/注冊頁面制作
      • 6.2.2 商品發布頁制作
      • 6.2.3 商品詳情頁制作

6.1 完成二手交易站點首頁開發

在此我們創建一個 相對定位 的 web應用 作為示例進行說明。創建示例后，為了使讀者創建的項目與示例的一致，需要設置相同的頁面大小，需要將屏幕大小更改為如圖的小屏屏幕：

6.1.1 網站標題頭制作

以下是當前頁面展示圖（由于主要是演示功能效果，此站點并不最求美觀性）：

該頁面的主要分為 3 個大塊，分別是：

• 頂部標題欄
• 頂部下分類與輪播頁
• 網頁中部展示內容信息
• 底部的頁尾

這三個大塊還可以細分，頂部標題欄 分為 左側站點信息、 搜側搜索 與 發布內容區域；頂部下部分可分為 類型分類與輪播頁；內容展示部分分為圖片與信息以及底部的具體頁尾內容。

我們根據基本的 行 和 列 制作網站標題頭：

我們可以看到，該標題頭可以當做是兩個行，左側一個、右側一個；在此可以將者兩個內容放在一個行中，這兩個行的寬度各為 50%，左側行的 水平對齊 為 左對齊，右側行的 水平對齊 為 右對齊，通過這樣的設置，即可完成示例所示，完成不同側的元素顯示。

我們先創建一個 頁面，命名為信息展示頁，在信息展示頁下創建一個 行 命名為 標題欄，再用 標題欄 作為父對象創建兩個兩個 行 于 標題欄 下，命名為 標題欄左側 與 標題欄右側。

在此需要注意，標題 左側欄 需要放在標題 右側欄 之下。在 iVX 中遵循越下部元素越靠前顯示的規則，左右顯示左為先右為后、上下顯示上為先下為后；若你需要一個元素顯示在一個另外一個元素左側，就需要這個元素在在另一個元素之下。

隨后我們可以給這些 行組件 設置一個統一的背景色為白色，再設置統一高度為 100px 即可。我們選中所有的 行組件，設置他們的相同屬性，步驟如下：

接下來統一選中 標題右側 和 標題左側，設置他們的寬度為 50%：

最后需要設置的為 標題左側欄 的 水平對齊 為 左側對齊、右側標題 欄 水平對齊 為 右側對齊，垂直對齊 均為 居中：

接下來在 標題左側行 中添加兩個文本，修改文本屬性后即可完成更改顏色：

在此你可能對該文本緊貼左側邊緣并不喜歡，可以更改該文本屬性中的 左外邊距 為 10 即可讓該文本距離左側有一定距離：

接下來我們在 標題右側行 中添加 文本組件 以及兩個 按鈕組件，并且給這 3 個組件設置相同的高度，使這 3 個組件能夠統一高度美觀，在此也將他們的文本內容、背景色進行修改：

此時標題欄即可制作完成：

但為了更好的使這個頁面看起來有層次感，我們可以修改當前信息展示頁的 背景色 為淡暗灰色，顏色代碼為 #F8F8F8，修改后頁面看起來更加美觀：

6.1.2 網站標題頭制作

接下來我們查看一下廣告信息區域的布局：

我們通過上圖很明顯的可以看到，該區域與標題欄類似，由一個 行組件 包裹了兩個容器組件，左側的占比區域較小，右側的較寬。在這里我們需要注意，該部分距離左側與右側有一定距離，此時我們需要創建一個行，命名為廣告塊；接下來設置這個 海報塊行 的 水平對齊 為居中，在其內部創建一個子組件 行容器 命名為 廣告內容，設置寬度為 90%，這樣這個行就可以居中進行顯示；最后兩步則是在這個 海報內容行 中創建兩個行，一個命名為 廣告左側 一個命名為 廣告右側 并且 廣告左側行 寬度為 30% 廣告右側 寬度為 70%，廣告左側 內創建一個 列 元素命名為 分類內容 即可，該部分結構如下（在這里需要注意，重復的內容為了精簡內容提高閱讀效率則不再贅述重復內容）：

接下來我們需要統一設置這些元素的高度為 300px，此高度為了防止高度不一致的情況出現。

接下來我們在左側分類內容列中創建一個 按鈕組件，設置文本為 “手機：華為、小米、OPPO”、寬度為 100%、高度為 50px：

隨后將該按鈕復制 6 個并修改其對應的文本，此時按鈕就可以充滿整個高度：

接著我們在廣告右側添加一個 輪播頁：

輪播頁 設置高度為 300px，設置好圖片后完成的只是 輪播頁背景 的添加，即可完成以下頁面效果：

此時我們完成 輪播頁 的背景添加，接下來還可以為這個 輪播頁 創建文本；將 輪播頁 作為一個容器，在其添加 行組件 命名為 輪播文本，接著在 輪播文本行 中添加 文本組件 即可為這個 輪播頁 完成如下效果：

此時該 輪播頁 的對象樹如下：

樣式可以按照個人的喜好完成自己的布局。

6.1.3 最新信息內容展示

接下來開始制作最新信息塊。通過以上的制作已經對 行、列組件 布局有了一定的熟練度，接下來我們查看最新信息塊的布局方式：

我們可以很清晰的看到該部分內容紅色區域為 行、藍色區域為 行、紫色為 行、綠色為 列。得知了布局信息后便很容易的完成該布局，由于內容相似，在此不再贅述，布局后的對象樹：

接下來在 詳情行組件 中創建一個列叫做 商品信息，寬度為 32% 、左側外邊距 為 8、上外邊距 為 8；接著在商品信息列為圖片和文字信息設置一個行方便控制布局：

之后再 圖片行組件 中添加一張圖片，設置寬度為 100%，在 商品文字信息中行中 添加一個文本：

此時復制商品信息多個在詳情行下，即可完成該部分內容：

6.1.4 頁尾完成

頁尾的制作相信現在對于你來說應該十分簡單，在此不再過多描述過程，只貼出對象樹：

6.2.1 登錄/注冊頁面制作

登錄界面制作為 4 個行，并且設置對應的 外邊距 即可，圖示如下：

我們新創建一個 頁組件 命名為 登錄，隨后創建一個 行組件 名為 登錄塊，再到 登錄塊行 中創建一個名為登錄內容的 行組件，在登錄內容行中創建 4 個 行組件，分別用作用命名包裹按鈕與文本，設置 水平對齊 為 居中 即可，對象樹 如下：

注冊頁也同理：

6.2.2 商品發布頁制作

商品發布頁與登錄/注冊頁大致類似：

商品發布頁的 對象樹 圖如下：

下拉選項組件 位于擴展組件之中，我們點擊 擴展組件 進行 下拉選項組件 的添加：

下拉菜單組件 在此作為類型的選擇菜單，添加完 下拉菜單組件 后，我們在 下拉菜單組件 屬性欄中修改選項列表即可，不同選項之間使用逗號間隔即可完成：

富文本編輯器組件 位于 組件欄 右側中部，點擊即可添加到 富文本行 之中：

6.2.3 商品詳情頁制作

商品詳情頁 與其它頁面保持一致的風格：

圖中框選位置為 富文本組件，點擊添加即可，方便之后的內容顯示，該部分的 對象樹 如下：

總結

以上是生活随笔為你收集整理的六、WebApp 二手信息站点页面制作（IVX 快速开发教程）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。