目標：

搭建商城的一個商品列表頁面（先做靜態(tài)頁）

開發(fā)環(huán)境：

白碼低代碼開發(fā)平臺的新自定義頁功能（使用vue框架）

前期準備：

需要先準備商品數(shù)據(jù)表并已有一些商品數(shù)據(jù)，并創(chuàng)建一個商品列表的數(shù)據(jù)集

商品列表頁面的設(shè)計圖如下（設(shè)計圖上傳到藍湖，可直接復制樣式代碼）

根據(jù)設(shè)計圖，可以看出三大部分元素組成：

①頂部一個搜索框

②中間的商品列表，列表每一項包含圖片、商品名稱、銷售價

③底部導航欄，包括首頁、所有商品、購物車（數(shù)量）、我的icon

實現(xiàn)步驟：

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

編輯頁面，切換到移動端

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

頂部搜索框：

1.打開組件庫，添加容器類型的塊組件，這里的塊組件將用于放置搜索框；

1.1組件高度和背景顏色等樣式都可以從藍湖設(shè)計圖這里找到并復制；

2.添加輸入類型的文本框組件

2.1在圖層的“數(shù)據(jù)”設(shè)置默認值，把原有的“文本內(nèi)容”清空，這里的默認值是文本框默認填寫的內(nèi)容；

然后將塊組件綁定這個文本框組件，這樣就可以將文本框“放”進了塊組件內(nèi)；

2.2這時打開藍湖的設(shè)計圖，找到搜索框的圖層，復制樣式代碼；

2.3回到白碼這邊，點擊css，點擊粘貼樣式，將從藍湖復制的樣式代碼粘貼過來并確定，就可以直接變成對應(yīng)的樣式了；

繼續(xù)調(diào)整文本框的位置，為了在輸入框左邊加上“放大鏡”的icon，以及占位文本“搜索….”可以通過組件的編程添加兩個屬性實現(xiàn)；

3.接下來開始做搜索框下的4個排序按鈕，同理，先添加一個塊組件，用于放置這4種排序的文本；

添加4個文本組件，并用排序塊綁定上這4個文本組件，修改文本默認，調(diào)整樣式；

再綁定一個圖片，用于顯示價格排序的升降序，圖片組件的數(shù)據(jù)-屬性這里可以直接設(shè)置顯示的圖片，圖片來自圖片庫；

排序塊已做好；

4.接下來開始做商品列表，這里需要用到列表組件；

4.1根據(jù)設(shè)計圖，商品列表中每一項包括一個圖片、商品名稱、和銷售價；

在添加這三個組件前，可以用列表組件綁定一個塊組件，一個塊代表一個商品，列表組件就循環(huán)顯示這些“塊”，塊組件再綁定一個圖片、兩個文本組件；

4.2接下來需要對列表組件和綁定的組件進行數(shù)據(jù)對接，列表組件的數(shù)據(jù)來源選擇數(shù)據(jù)集商品列表；

然后創(chuàng)建需要顯示的屬性：圖片、商品名稱和價格；

4.3為了能讓商品塊下的組件對接上數(shù)據(jù)，商品塊組件也要創(chuàng)建屬性對應(yīng)上列表組件的屬性，然后圖片、文本組件就能對應(yīng)上商品塊組件的屬性了；

數(shù)據(jù)對接后，就可以繼續(xù)調(diào)整樣式了；

商品列表組件就做好了；

5.接下來開始做底部導航欄，同理，先添加一個塊組件，再綁定4個圖片和4個文本組件；

這個導航欄和前面的排序塊做法類型，唯一不同的是，定位類型要改成固定定位，固定在底部。

6.預覽效果