关于图片歌手图片不显示的问题
来源:4-4 歌手详情页 MusicList 组件功能交互优化(01)
柳暗花明5555629
2021-11-18
<template>
<div class="music-list">
<div
class="back"
>
<i class="icon-back"></i>
</div>
<h1 class="title">{{ title }}</h1>
<div
class="bg-image"
:style="bgImageStyle"
ref="bgImage"
>
<div
class="filter"
></div>
</div>
<scroll
class="list"
:style="scrollStyle"
>
<div class="song-list-wrapper">
<song-list
:songs="songs"
></song-list>
</div>
</scroll>
</div>
</template>
<script>
import SongList from '@/components/base/song-list/song-list'
import Scroll from "@/components/base/scroll/scroll";
// import { mapActions, mapState } from 'vuex'
// const RESERVED_HEIGHT = 40
export default {
name: 'music-list',
components: {
SongList,
Scroll
},
props: {
songs: {
type: Array,
default() {
return []
}
},
title: String,
pic: String,
loading: Boolean,
noResultText: {
type: String,
default: '抱歉,没有找到可播放的歌曲'
},
rank: Boolean
},
data() {
return {
imageHeight: 0
}
},
mounted() {
console.log('ref---', this.$refs.bgImage.clientHeight)
this.imageHeight = this.$refs.bgImage.clientHeight
},
computed: {
bgImageStyle() {
return {
backgroundImage: `url(${this.pic})`
}
},
scrollStyle() {
return {top: `${this.imageHeight}`}
}
}
}
</script>
<style lang="scss" scoped>
.music-list {
position: relative;
height: 100%;
.back {
position: absolute;
top: 0;
left: 6px;
z-index: 20;
transform: translateZ(2px);
.icon-back {
display: block;
padding: 10px;
font-size: $font-size-large-x;
color: $color-theme;
}
}
.title {
position: absolute;
top: 0;
left: 10%;
width: 80%;
z-index: 20;
transform: translateZ(2px);
@include no-wrap();
text-align: center;
line-height: 40px;
font-size: $font-size-large;
color: $color-text;
}
.bg-image {
position: relative;
width: 100%;
transform-origin: top;
background-size: cover;
.play-btn-wrapper {
position: absolute;
bottom: 20px;
z-index: 10;
width: 100%;
.play-btn {
box-sizing: border-box;
width: 135px;
padding: 7px 0;
margin: 0 auto;
text-align: center;
border: 1px solid $color-theme;
color: $color-theme;
border-radius: 100px;
font-size: 0;
}
.icon-play {
display: inline-block;
vertical-align: middle;
margin-right: 6px;
font-size: $font-size-medium-x;
}
.text {
display: inline-block;
vertical-align: middle;
font-size: $font-size-small;
}
}
.filter {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(7, 17, 27, 0.4);
}
}
.list {
position: absolute;
bottom: 0;
width: 100%;
z-index: 0;
.song-list-wrapper {
padding: 20px 30px;
background: $color-background;
}
}
}
</style>
然后在mounted里面打印:
this.$refs.bgImage.clientHeight
打印结果为0
所以动态获取图片高度为0,导致图片没高度,出不来,老师有什么办法处理吗?
写回答
2回答
-
namu_
2022-03-28
我也遇到你这个问题,请问解决了吗?
00 -
ustbhuangyi
2021-11-18
你把代码传到 GitHub 上,我抽空帮你看看
012021-12-03
相似问题