vue_music:排行榜rank中top-list.vue中样式的实现:class
2023-09-27 14:26:44 时间
排行榜的歌曲列表,根据排名渲染不同的样式,同时需要考虑分辨率的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
:屏幕分辨率从而加载不同的图片
相关文章
- VScode调配vue环境
- Vue 中的 Todo-list 案例
- Vue.js源码(2):初探List Rendering
- 精品spring boot+MySQL学生在线考试系统vue
- 适合前端Vue开发童鞋的跨平台Weex
- vue和uni-app不同的类型绑定不同的类名
- 可莉要你帮她做一个蹦蹦炸弹管理系统!(Spring Security + Vue前后端分离学习示例)
- 优化无限列表性能vue-virtual-scroll-list【测试90w条数据】
- 在vue页面引入echarts,图表的数据来自数据库 springboot+mybatis+vue+elementui+echarts实现图表的制作
- 使用 Vue.js 制作一个简单的调查问卷平台
- vue——路由守卫beforeEach,next(), next('/'), next({...to, repalce: true})说明及实例问题