我們已經(jīng)用了兩篇的篇幅介紹了微搭的布局組件,，包括普通容器,、文本、圖片,、輪播容器,。

微搭中還有粗粒度的組件，今天介紹的數(shù)據(jù)容器就是粗粒度的組件,。所謂粗粒度的組件,，一般包括基礎(chǔ)組件、樣式還有默認(rèn)的事件,。數(shù)據(jù)容器一共包含三種分別是數(shù)據(jù)列表,、數(shù)據(jù)詳情和表單容器。

在我們傳統(tǒng)開發(fā)中,，我們將頁(yè)面的基本功能拆分成增刪改查,。使用低碼開發(fā)的時(shí)候我們用上述的三個(gè)組件就可以實(shí)現(xiàn)頁(yè)面的基本功能,。

01 數(shù)據(jù)列表

數(shù)據(jù)列表對(duì)應(yīng)著我們頁(yè)面中的列表查詢功能，使用的時(shí)候先將組件拖入到編輯區(qū)

數(shù)據(jù)列表組件包括五種效果可供選擇,，分別是空白,、簡(jiǎn)單列表、詳細(xì)列表,、圖文列表,、卡片列表。

不同模板對(duì)應(yīng)著不同的場(chǎng)景,。比如一般首頁(yè)如果我們放一些動(dòng)態(tài)信息的就可以放簡(jiǎn)單列表,，如果你的動(dòng)態(tài)配了圖片的可以選擇圖文列表?？ㄆ斜硪话阌迷陔娚填愋〕绦蛴脕?lái)展示最新的商品,。

我們這里選擇簡(jiǎn)單列表作為示例，選擇了模板之后需要選擇對(duì)應(yīng)的數(shù)據(jù)源,，組件會(huì)自動(dòng)識(shí)別自動(dòng)進(jìn)行數(shù)據(jù)綁定

如果自動(dòng)識(shí)別的字段不是你需要的,，可以選擇文本組件，重新綁定需要的內(nèi)容

綁定的時(shí)候要從循環(huán)對(duì)象里選擇需要的字段

02 數(shù)據(jù)詳情

數(shù)據(jù)詳情對(duì)應(yīng)著我們小程序里查看詳情的功能,，一般的場(chǎng)景是從列表頁(yè)點(diǎn)擊某條數(shù)據(jù),，跳轉(zhuǎn)到詳情頁(yè)然后進(jìn)行展示。

因?yàn)橐M(jìn)行頁(yè)面跳轉(zhuǎn),，我們需要先新建一個(gè)詳情頁(yè),。在頁(yè)面區(qū)域點(diǎn)擊+號(hào)，創(chuàng)建一個(gè)詳情頁(yè),。

在詳情頁(yè),，我們將數(shù)據(jù)詳情組件拖入到編輯區(qū)

數(shù)據(jù)詳情組件先需要選擇需要的數(shù)據(jù)源

數(shù)據(jù)詳情需要根據(jù)頁(yè)面?zhèn)魅氲臄?shù)據(jù)標(biāo)識(shí)來(lái)過(guò)濾數(shù)據(jù)，我們會(huì)到我們的列表頁(yè)面,，選中我們的組件,，給組件定義點(diǎn)擊事件，然后傳入數(shù)據(jù)標(biāo)識(shí)

我們配置的動(dòng)作是打開頁(yè)面,，選擇我們的詳情頁(yè)

需要先新建一個(gè)頁(yè)面URL參數(shù)

輸入標(biāo)識(shí)

參數(shù)建立了之后我們進(jìn)行數(shù)據(jù)綁定

從循環(huán)對(duì)象里選擇我們的_id綁定

列表頁(yè)配置好之后,，我們選擇詳情頁(yè)，配置篩選條件,，我們將數(shù)據(jù)標(biāo)識(shí)配置成我們的參數(shù)

03 表單容器

表單容器一般用在我們的新增或者更新場(chǎng)景,，先新建一個(gè)數(shù)據(jù)添加的頁(yè)面

然后將表單容器組件添加到頁(yè)面中

選擇我們需要的數(shù)據(jù)源

表單容器會(huì)自動(dòng)的識(shí)別字段的類型，生成對(duì)應(yīng)的組件

總結(jié)

本篇我們介紹了我們小程序開發(fā)中經(jīng)常會(huì)用的三種組件,，數(shù)據(jù)列表,、數(shù)據(jù)詳情、表單容器的使用方法,。掌握這些常用組件,，就可以快速開發(fā)出頁(yè)面來(lái),，打開你的微搭趕快試試吧。