渲染面包屑

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

其數據有3部分：

• 商品分類

• 商品品牌

• spu標題

我們的模型中都有，所以直接渲染即可（頁面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>

渲染商品列表

先看下整體效果：

這個部分需要渲染的數據有5塊：

• sku圖片

• sku標題

• 副標題

• sku價格

• 特有規格屬性列表

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

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

副標題

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

在第146行左右：

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

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

渲染規格屬性列表

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

因此，這里我們用vue，不過需要先把數據放到js對象中，方便vue使用

初始化數據

我們在頁面的head中，定義一個js標簽，然后在里面定義變量，保存與sku相關的一些數據：

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

• specialSpec：這是SpuDetail中唯一與Sku相關的數據

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

• paramMap：規格參數的id和name鍵值對，方便頁面根據id獲取參數名

• skus：sku集合

我們來看下頁面獲取的數據：

通過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>

然后刷新頁面查看：

數據成功渲染了。不過我們發現所有的規格都被勾選了。這是因為現在，每一個規格都有樣式：selected，我們應該只選中一個，讓它的class樣式為selected才對！

?

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

?

規格屬性的篩選

分析

規格參數的格式是這樣的：

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

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

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

但問題是，第一次進入頁面時，用戶并未選擇任何參數。因此索引應該有一個默認值，我們將默認值設置為0。

我們在head的script標簽中，對索引對象進行初始化：

然后在vue中保存：

頁面改造

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

<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>

效果：

?

超強干貨來襲 云風專訪：近40年碼齡，通宵達旦的技術人生

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。