vue_music:排行榜rank中top-list.vue中樣式的實現:class
阿新 • • 發佈:2018-11-07
排行榜的歌曲列表,根據排名渲染不同的樣式,同時需要考慮解析度的2x 3x圖
- 不同的樣式——:class
- 考慮解析度的2x 3x圖——需要在stylu中的mixin中bgImage根據螢幕解析度選擇圖片
1.功能
<div class="rank" v-show="rank">
<span :class="getRankCls(index)">{{getRankText(index)}}</span>
</div>
在vue中繫結HTML Class,除了陣列,物件語法,也可以使用函式返回值(不必使用v-if v-else等複雜邏輯)
在methods中定義,返回相應的class
getRankCls(index) {
if (index <= 2) {
return `icon icon${index}`
} else {
return 'text'
}
},
getRankText(index) {
if (index > 2) {
return index + 1
}
}
2.stylu處理解析度
.icon display: inline-block width: 25px height: 24px background-size: 25px 24px &.icon0 bg-image('first') &.icon1 bg-image('second') &.icon2 bg-image('third')
這裡邊重要的是bg-image函式
bg-image($url)
background-image: url($url + "@2x.png")
@media (-webkit-min-device-pixel-radio: 3),(min-device-pixel-radio: 3)
background-image: url($url + "@3x.png")
device-pixel-radio
:螢幕解析度從而載入不同的圖片
原文地址:https://segmentfault.com/a/1190000016926581