確定SKU

在我們設(shè)計sku數(shù)據(jù)的時候，就已經(jīng)添加了一個字段：indexes：

這其實(shí)就是規(guī)格參數(shù)的索引組合。

而我們在頁面中，用戶點(diǎn)擊選擇規(guī)格后，就會把對應(yīng)的索引保存起來：

因此，我們可以根據(jù)這個indexes來確定用戶要選擇的sku

我們在vue中定義一個計算屬性，來計算與索引匹配的sku：

computed:{sku(){const index = Object.values(this.indexes).join("_");return this.skus.find(s => s.indexes == index);} }

在瀏覽器工具中查看：

渲染sku列表

既然已經(jīng)拿到了用戶選中的sku，接下來，就可以在頁面渲染數(shù)據(jù)了

圖片列表

商品圖片是一個字符串，以,分割，頁面展示比較麻煩，所以我們編寫一個計算屬性：images()，將圖片字符串變成數(shù)組：

computed: {sku(){const index = Object.values(this.indexes).join("_");return this.skus.find(s=>s.indexes==index);},images(){return this.sku.images ? this.sku.images.split(",") : [''];} },

頁面改造：

<div class="zoom"><!--默認(rèn)第一個預(yù)覽--><div id="preview" class="spec-preview"><span class="jqzoom"><img :jqimg="images[0]" :src="images[0]" width="400px" height="400px"/></span></div><!--下方的縮略圖--><div class="spec-scroll"><a class="prev">&lt;</a><!--左右按鈕--><div class="items"><ul><li v-for="(image, i) in images" :key="i"><img :src="image" :bimg="image" onmousemove="preview(this)" /></li></ul></div><a class="next">&gt;</a></div> </div>

效果：

標(biāo)題和價格

完整效果

?

?

總結(jié)

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

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