注：iVX也有免費(fèi)直播課《第八期直播課》

一、詳情頁制作

在之前的章節(jié)中，我們已經(jīng)制作完畢了登錄、注冊、首頁等內(nèi)容，在這一節(jié)中，我們編寫詳情頁以及詳情頁功能制作。

詳情頁頁面如下：

詳情頁頭部也就是一個頭部欄，下面是一個行，里面有標(biāo)題和點(diǎn)贊信息內(nèi)容，往下是一個富文本顯示區(qū)域，再往下為評論內(nèi)容區(qū)，接著還有一個評論內(nèi)容顯示區(qū)域：

首先我們創(chuàng)建頭部，頭部跟其他頁面的頭部一致，不再贅述創(chuàng)建方法，頁面組件如下：

接著是標(biāo)題區(qū)域，標(biāo)題文本所占80%，點(diǎn)贊數(shù)據(jù)文本占 20%：


此時頁面如下：

接下來就是博文內(nèi)容區(qū)域，我們創(chuàng)建一個博文內(nèi)容行，高度設(shè)置為撐開，并且需要進(jìn)行y軸裁剪，因?yàn)樵u論區(qū)內(nèi)容不固定，肯定超出了當(dāng)前的高度范圍：

接著在這個博文內(nèi)容行內(nèi)創(chuàng)建3個行表示這個博文內(nèi)容行下的3個內(nèi)容：

接下來給內(nèi)容區(qū)設(shè)置內(nèi)邊距：

評論內(nèi)容區(qū)域也要設(shè)置內(nèi)邊距，防止每個內(nèi)容過于靠近邊界：

接著在內(nèi)容區(qū)創(chuàng)建一個富文本用于顯示內(nèi)容：

此時富文本需要給定一個固定高度：

接著我們在評論區(qū)中創(chuàng)建評論區(qū)內(nèi)容，一個是輸入的輸入框一個是一個評論按鈕：

此時評論內(nèi)容并不允許多行評論，我們需要該評論區(qū)允許多行輸入：

那么此時再更改按鈕的顯示屬性頁面如下：

接下來編寫評論區(qū)內(nèi)容，由于評論區(qū)的每個評論是單獨(dú)的一行信息，我們創(chuàng)建一個行命名為評論：

在此還需要設(shè)置對應(yīng)的內(nèi)邊距信息，使其可以有一定的邊緣厚度：

接著創(chuàng)建一行評論內(nèi)容以及一行時間內(nèi)容：

此時頁面效果如下：

二、功能完善

此時詳情頁是用來顯示對應(yīng)的文章的內(nèi)容，那么此時我們必然需要知道點(diǎn)擊的是那一個文章，那么在數(shù)據(jù)庫中，文章ID則表示當(dāng)前數(shù)據(jù)，為當(dāng)前數(shù)據(jù)的身份ID，那么此時我們得在當(dāng)前頁面上新建一個變量用于存儲點(diǎn)擊到的頁面ID：

接著，由于是從首頁點(diǎn)擊了數(shù)據(jù)到達(dá)當(dāng)前的詳情頁，那么此時我們還需要完善首頁的內(nèi)容。

創(chuàng)建一個服務(wù)，命名為文章獲取，用于獲取數(shù)據(jù)庫的文章信息：

接著編寫這個服務(wù)的事件：

該事件直接選擇文章數(shù)據(jù)庫隨后直接輸出當(dāng)前輸出結(jié)果的對象數(shù)組的值即可。

接著我們到首頁中，給予一個事件，該時間為顯示時間，當(dāng)前頁面顯示后直接選擇對應(yīng)的數(shù)據(jù)獲取服務(wù)：

那么此時數(shù)據(jù)獲取到了之后就還需要一個容器存儲數(shù)據(jù)內(nèi)容，那么此時新建一個對象變量命名為文章數(shù)據(jù)：

文章數(shù)據(jù)對象數(shù)組需要與數(shù)據(jù)庫數(shù)據(jù)相同的列名才可以更好的獲取內(nèi)容，那么此時直接給予我們需要的列名，并且要與數(shù)據(jù)庫列名相似：

隨后直接獲取把獲取到的數(shù)據(jù)值給予到容器就可以了：

接著我們創(chuàng)建一個 for 循環(huán)，把內(nèi)容存放for 循環(huán)之中：

選擇對應(yīng)的數(shù)據(jù)來源為循環(huán)創(chuàng)建：

接著給予之后的內(nèi)容數(shù)據(jù)綁定，在設(shè)置閱讀量的時候需要對應(yīng)的數(shù)據(jù)進(jìn)行字符串拼接，字符串內(nèi)容需要對應(yīng)的雙引號引起來：

隨后再綁定其他內(nèi)容：


最后顯示如下：

接下來預(yù)覽界面：

數(shù)據(jù)成功進(jìn)行了顯示，那么接下來點(diǎn)擊當(dāng)前內(nèi)容后應(yīng)該跳轉(zhuǎn)頁面到對應(yīng)的詳情頁之中。

總結(jié)

以上是生活随笔為你收集整理的五、文章详情页制作及跳转功能实现《iVX低代码/无代码个人博客制作》的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。