低程式碼快速搭建完整商品列表頁

目標：

搭建商城的一個商品列表頁面（先做靜態頁）

開發環境：

白碼低程式碼開發平臺的新自定義頁功能（使用vue框架）

前期準備：

需要先準備商品資料表並已有一些商品資料，並建立一個商品列表的資料集
商品列表頁面的設計圖如下（設計圖上傳到藍湖，可直接複製樣式程式碼）

根據設計圖，可以看出三大部分元素組成：
①頂部一個搜尋框
②中間的商品列表，列表每一項包含圖片、商品名稱、銷售價
③底部導航欄，包括首頁、所有商品、購物車（數量）、我的icon

實現步驟：

新增一個頁面，命名為商品列表；

編輯頁面，切換到移動端

開啟圖片庫，將頁面所需圖片素材上傳到圖片庫；

頂部搜尋框：
1.開啟元件庫，新增容器型別的塊元件，這裡的塊元件將用於放置搜尋框；

1.1元件高度和背景顏色等樣式都可以從藍湖設計圖這裡找到並複製；

2.新增輸入型別的文字框元件

2.1在圖層的“資料”設定預設值，把原有的“文字內容”清空，這裡的預設值是文字框預設填寫的內容；

然後將塊元件繫結這個文字框元件，這樣就可以將文字框“放”進了塊元件內；

2.2這時開啟藍湖的設計圖，找到搜尋框的圖層，複製樣式程式碼；

2.3回到白碼這邊，點選css，點選貼上樣式，將從藍湖複製的樣式程式碼貼上過來並確定，就可以直接變成對應的樣式了；

繼續調整文字框的位置，為了在輸入框左邊加上“放大鏡”的icon，以及佔位文字“搜尋…”可以通過元件的程式設計新增兩個屬性實現；

3.接下來開始做搜尋框下的4個排序按鈕，同理，先新增一個塊元件，用於放置這4種排序的文字；

新增4個文字元件，並用排序塊繫結上這4個文字元件，修改文字預設，調整樣式；

再繫結一個圖片，用於顯示價格排序的升降序，圖片元件的資料-屬性這裡可以直接設定顯示的圖片，圖片來自圖片庫；

排序塊已做好；
4.接下來開始做商品列表，這裡需要用到列表元件；

4.1根據設計圖，商品列表中每一項包括一個圖片、商品名稱、和銷售價；
在新增這三個元件前，可以用列表元件繫結一個塊元件，一個塊代表一個商品，列表元件就迴圈顯示這些“塊”，塊元件再繫結一個圖片、兩個文字元件；

4.2接下來需要對列表元件和繫結的元件進行資料對接，列表元件的資料來源選擇資料集商品列表；

然後建立需要顯示的屬性：圖片、商品名稱和價格；

4.3為了能讓商品塊下的元件對接上資料，商品塊元件也要建立屬性對應上列表元件的屬性，然後圖片、文字元件就能對應上商品塊元件的屬性了；

資料對接後，就可以繼續調整樣式了；

商品列表元件就做好了；
5.接下來開始做底部導航欄，同理，先新增一個塊元件，再繫結4個圖片和4個文字元件；
這個導航欄和前面的排序塊做法型別，唯一不同的是，定位型別要改成固定定位，固定在底部。

6.預覽效果