渲染面包屑

在商品展示頁的頂部，有一個商品分類、品牌、標(biāo)題的面包屑

其數(shù)據(jù)有3部分：

• 商品分類

• 商品品牌

• spu標(biāo)題

我們的模型中都有，所以直接渲染即可（頁面101行開始）：

<div class="crumb-wrap"><ul class="sui-breadcrumb"><li th:each="category : ${categories}"><a href="#" th:text="${category.name}">手機</a></li><li><a href="#" th:text="${brand.name}">Apple</a></li><li class="active" th:text="${spu.title}">Apple iPhone 6s</li></ul> </div>

渲染商品列表

先看下整體效果：

這個部分需要渲染的數(shù)據(jù)有5塊：

• sku圖片

• sku標(biāo)題

• 副標(biāo)題

• sku價格

• 特有規(guī)格屬性列表

其中，sku 的圖片、標(biāo)題、價格，都必須在用戶選中一個具體sku后，才能渲染。而特有規(guī)格屬性列表可以在spuDetail中查詢到。而副標(biāo)題則是在spu中，直接可以在頁面渲染

因此，我們先對特有規(guī)格屬性列表進(jìn)行渲染。等用戶選擇一個sku，再通過js對其它sku屬性渲染

副標(biāo)題

副標(biāo)題是在spu中，所以我們直接通過Thymeleaf渲染：

在第146行左右：

<div class="news"><span th:utext="${spu.subTitle}"></span></div>

副標(biāo)題中可能會有超鏈接，因此這里也用th:utext來展示，效果：

渲染規(guī)格屬性列表

規(guī)格屬性列表將來會有事件和動態(tài)效果。我們需要有js代碼參與，不能使用Thymeleaf來渲染了。

因此，這里我們用vue，不過需要先把數(shù)據(jù)放到j(luò)s對象中，方便vue使用

初始化數(shù)據(jù)

我們在頁面的head中，定義一個js標(biāo)簽，然后在里面定義變量，保存與sku相關(guān)的一些數(shù)據(jù)：

<script th:inline="javascript">// sku集合const skus = /*[[${skus}]]*/ [];// 規(guī)格參數(shù)id與name對const paramMap = /*[[${params}]]*/ {};// 特有規(guī)格參數(shù)集合const specialSpec = JSON.parse(/*[[${spuDetail.specialSpec}]]*/ ""); </script>

• specialSpec：這是SpuDetail中唯一與Sku相關(guān)的數(shù)據(jù)

  因此我們并沒有保存整個spuDetail，而是只保留了這個屬性，而且需要手動轉(zhuǎn)為js對象。

• paramMap：規(guī)格參數(shù)的id和name鍵值對，方便頁面根據(jù)id獲取參數(shù)名

• skus：sku集合

我們來看下頁面獲取的數(shù)據(jù)：

通過Vue渲染

我們把剛才獲得的幾個變量保存在Vue實例中：

然后在頁面中渲染：

<div id="specification" class="summary-wrap clearfix"><dl v-for="(v,k) in specialSpec" :key="k"><dt><div class="fl title"><i>{{paramMap[k]}}</i></div></dt><dd v-for="(str,j) in v" :key="j"><a href="javascript:;" class="selected">{{str}}<span title="點擊取消選擇">&nbsp;</span></a></dd></dl> </div>

然后刷新頁面查看：

數(shù)據(jù)成功渲染了。不過我們發(fā)現(xiàn)所有的規(guī)格都被勾選了。這是因為現(xiàn)在，每一個規(guī)格都有樣式：selected，我們應(yīng)該只選中一個，讓它的class樣式為selected才對！

?

那么問題來了，我們該如何確定用戶選擇了哪一個？

?

規(guī)格屬性的篩選

分析

規(guī)格參數(shù)的格式是這樣的：

每一個規(guī)格項是數(shù)組中的一個元素，因此我們只要保存被選擇的規(guī)格項的索引，就能判斷哪個是用戶選擇的了！

我們需要一個對象來保存用戶選擇的索引，格式如下：

{"4":0,"12":0,"13":0 }

但問題是，第一次進(jìn)入頁面時，用戶并未選擇任何參數(shù)。因此索引應(yīng)該有一個默認(rèn)值，我們將默認(rèn)值設(shè)置為0。

我們在head的script標(biāo)簽中，對索引對象進(jìn)行初始化：

然后在vue中保存：

頁面改造

我們在頁面中，通過判斷indexes的值來判斷當(dāng)前規(guī)格是否被選中，并且給規(guī)格綁定點擊事件，點擊規(guī)格項后，修改indexes中的對應(yīng)值：

<div id="specification" class="summary-wrap clearfix"><dl v-for="(v,k) in specialSpec" :key="k"><dt><div class="fl title"><i>{{paramMap[k]}}</i></div></dt><dd v-for="(str,j) in v" :key="j"><a href="javascript:;" :class="{selected: j===indexes[k]}" @click="indexes[k]=j">{{str}}<span v-if="j===indexes[k]" title="點擊取消選擇">&nbsp;</span></a></dd></dl> </div>

效果：

?

超強干貨來襲 云風(fēng)專訪：近40年碼齡，通宵達(dá)旦的技術(shù)人生

總結(jié)

以上是生活随笔為你收集整理的渲染sku选择的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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