目標(biāo)：

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

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

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

前期準(zhǔn)備：

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

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

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

①頂部一個(gè)搜索框

②中間的商品列表，列表每一項(xiàng)包含圖片、商品名稱、銷售價(jià)

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

實(shí)現(xiàn)步驟：

新增一個(gè)頁面，命名為商品列表；

編輯頁面，切換到移動(dòng)端

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

頂部搜索框：

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

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

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

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

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

2.2這時(shí)打開藍(lán)湖的設(shè)計(jì)圖，找到搜索框的圖層，復(fù)制樣式代碼；

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

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

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

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

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

排序塊已做好；

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

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

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

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

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

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

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

商品列表組件就做好了；

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

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

6.預(yù)覽效果