web模拟淘宝评价效果

最近做的一个项目，正好负责的页面中有商品展示和评价模块，刚开始只是静态页的排版。等静态页面布置好，就开始构思动态的数据和效果，对于我这种小白，能想到的就是先写一个假数据，让页面变成效果图的样子，对于很多大佬来说是很简单的一个效果，但是我不知道我的思路是否正确，以下是最终的效果。

ZBM~_E2%(L2A668DVWZY64W.png

起初是将内容写死在标签中，在后期又把数据存进json中，请求的数据，对于VIP和LV的等级还有打分的数量我觉得还有待改善，以下是我模拟的假数据。

N2_W5GTJ}{E)[email protected]

我们是基于vue框架的开发，为了方便后期和后台定数据，所以将假数据写在了组件中。图中shopnNumber是定义的打分的分数，LV是等级，VIP是用户是否是vip，MessageImg就是用户评价时传的图片，或者可以说是买家秀。ImgNum是代表用户传的图片的数量。

shopSales.jpg

以上是页面结构，我对打分的分数那一块还有些不满意，因为要根据打的分数循环出星星的数量，所以我把假数据设置成了['' , '', '']。我觉得这样很不优雅，刚刚尝试了一下改成了shopNumber：4(分数)。感觉自己棒棒哒。
效果图中用户上传的图片最多显示六张，多出的隐藏，但是隐藏的数量要显示出来。隐藏的数量会在最后一张图片上，还有有一个类似于蒙版的效果，所以就要判断，图片的数量是否大于六张，如果大于六张蒙版就显示，否则就隐藏，所以用到了v-if指令。v-if = “index < 6”是根据图片的下标判断是否大于六张，如果成立index大于6的话就隐藏。v-if = ‘（item。ImgNum - 6）> 0’是判断多出了几张图片，被隐藏的数量要显示多少。在写这篇文章时又发现了好多点，做了些改动，假数据变得简洁了很多。

天气预报真的好准时，北京下的雨好大，有没有玩王者的大佬，王者峡谷相约吧！

周末愉快。

timg.gif