與網(wǎng)站類似，小程序詳情頁同樣支持自定義設(shè)計(jì)。以產(chǎn)品詳情為例，小程序產(chǎn)品詳情頁默認(rèn)有基本的樣式設(shè)置項(xiàng)，如容器、圖片、標(biāo)題、底部按鈕等設(shè)置項(xiàng)

如果想完全自定義設(shè)計(jì)，首先需要?jiǎng)h除默認(rèn)的版塊，添加自由容器版塊到頁面中并設(shè)置綁定頁面數(shù)據(jù)源

綁定頁面數(shù)據(jù)源的意思是當(dāng)前版塊里面的數(shù)據(jù)允許綁定當(dāng)前詳情頁的動(dòng)態(tài)數(shù)據(jù)，例如詳情標(biāo)題、圖片、正文內(nèi)容都屬于當(dāng)前頁面數(shù)據(jù)源數(shù)據(jù)。拖拽圖片到頁面中，設(shè)置使用動(dòng)態(tài)數(shù)據(jù)，選擇縮略圖字段即完成了詳情產(chǎn)品圖的自動(dòng)綁定(需預(yù)覽才能看到實(shí)際效果)。除此之外還可以對(duì)圖片進(jìn)行樣式設(shè)置，例如添加圓角。

與圖片類似，拖拽文本元素到版塊里同樣可以綁定動(dòng)態(tài)數(shù)據(jù)，例如綁定產(chǎn)品標(biāo)題字段。

另外比較重要的就是詳情富文本內(nèi)容了，富文本比較特殊，內(nèi)容高度是根據(jù)后臺(tái)編輯內(nèi)容長(zhǎng)度決定了，無法設(shè)計(jì)時(shí)確定。因?yàn)椴荒苁褂霉潭ǜ叨鹊淖杂扇萜鳎鴳?yīng)使用流式容器，流式容器的區(qū)別是他的高度會(huì)隨著內(nèi)容高度自動(dòng)變化。默認(rèn)拖拽富文本組件到頁面中將自動(dòng)包裹流式容器，可以給上級(jí)流式容器添加內(nèi)邊距提升閱讀體驗(yàn)。

底部按鈕的添加比較特殊，底部按鈕屬于浮動(dòng)元素，始終固定貼緊在手機(jī)底部，添加時(shí)需要切換到浮動(dòng)面板，拖拽按鈕到頁面中，然后設(shè)置左下對(duì)齊或者右下對(duì)齊模式，設(shè)置對(duì)應(yīng)的位置信息就能讓按鈕始終固定在底部對(duì)應(yīng)位置。

完成了以上設(shè)置，一個(gè)帶有基本數(shù)據(jù)的自定義詳情頁就做好啦！可以添加任意元素到頁面中進(jìn)行裝飾，也可以添加其他動(dòng)態(tài)列表到底部版塊里方便顯示更多信息。