vue路由跳转子组件_vue跳转到子路由子路由的组件页面无法滚动

问题描述

最近在用vue仿qq音乐，写了四个基础组件：推荐，歌手，排行，搜素。

歌手组件是获取一个歌手列表，点击歌手跳转到子路由，歌手的所有歌曲singer-detail组件，singer-detail组件内引用了一个music-list组件，music-list组件包括一个标题栏和一个song-list组件，song-list组件是是该歌手的所有歌曲，遇到了一个问题，

当跳转到singer-detail组件的时候，滚动滚动条无法滚动song-list组件的数据，请问各位大佬这种问题该怎么解决

问题出现的环境背景及自己尝试过哪些方法

用了一下mint-ui的滚动插件也不行

相关代码

// 请把代码文本粘贴到下方(请勿用图片代替代码)

singer组件的代码：

import {getSingerList} from '../../api/singer'

import {ERR_OK} from '../../api/config'

import ListView from '../../base/list-view/list-view'

import store from '../../store'

export default {

name: 'singer',

data () {

return {

singer: []

}

},

created () {

this._getSingerList()

},

computed: {

},

methods: {

_getSingerList () {

getSingerList().then((res) => {

if (res.code === ERR_OK) {

this.singer = this._handleList(res.data.list)

}

})

},

_handleList (list) {

let map = {

hot: {

title: '热门',

items: []

}

}

list.forEach((item, index) => {

if (index < 10) {

map.hot.items.push({

name: item.Fsinger_name,

id: item.Fsinger_mid,

avatar: 'https://y.gtimg.cn/music/photo_new/T001R300x300M000' + item.Fsinger_mid + '.jpg?max_age=2592000'

})

}

let key = item.Findex

if (!map[key]) {

map[key] = {

title: key,

items: []

}

}

map[key].items.push({

name: item.Fsinger_name,

id: item.Fsinger_mid,

avatar: 'https://y.gtimg.cn/music/photo_new/T001R300x300M000' + item.Fsinger_mid + '.jpg?max_age=2592000'

})

})

// 对map进行处理

let hot = []

let all = []

for (let key in map) {

let val = map[key]

if (val.title.match(/[a-zA-Z]/)) {

all.push(val)

} else if (val.title === '热门') {

hot.push(val)

}

}

// 排序

all.sort((a, b) => {

return a.title.charCodeAt(0) - b.title.charCodeAt(0)

})

return hot.concat(all)

},

selectSinger (singers) {

this.$router.push({

path: `/singer/${singers.id}`

})

store.commit('setSinger', singers)

}

},

mounted () {

},

components: {

ListView

}

}

.singer{

position: relative;

width: 100%;

height: 100%;

overflow: hidden;

}

singer-detail的代码：

import store from '../../store'

import {getSingerDetail} from '../../api/singer'

import {ERR_OK} from '../../api/config'

import {getVkey} from '../../api/vkey'

import {createSong} from '../../common/js/song'

import MusicList from '../music-list/music-list'

export default {

name: 'singer_details',

components: {MusicList},

data () {

return {

vkey: '',

songs: ''

}

},

computed: {

singer () {

return store.getters.state

},

title () {

return this.singer.name

},

bgImage () {

return this.singer.avatar

}

},

methods: {

_getDetail () {

if (!this.singer.id) {

this.$router.push('/singer')

return false

}

getSingerDetail(this.singer.id).then((res) => {

if (res.code === ERR_OK) {

this.songs = this._handleMusicData(res.data.list)

}

})

},

_handleMusicData (list) {

let ret = []

list.forEach((item) => {

let {musicData} = item

getVkey(musicData.songmid).then((res) => {

let v = res.data.items[0].vkey

if (musicData.songid && musicData.albummid) {

ret.push(createSong(musicData, v))

}

})

})

return ret

}

},

created () {

this._getDetail()

}

}

.slide-enter-active, .slide-leave-active{

transition: all 0.3s;

}

.slide-enter, .slide-leave-to{

transform: translate3d(100%, 0, 0);

}

music-list的代码：

返回

import SongList from '../../base/song-list/song-list'

export default {

name: 'music-list',

props: {

bgImage: {

type: String,

default: ''

},

songs: {

type: Array,

default: function () {

return []

}

},

title: {

type: String,

default: ''

}

},

computed: {

bgStyle () {

return `background-image: url(${this.bgImage})`

}

},

components: {

SongList

}

}

.music-list{

position: fixed;

z-index: 100;

top: 0;

left: 0;

bottom: 0;

right: 0;

background: #f4f4f4;

}

song-list的代码：

• {{song.name}}

  {{getDesc(song)}}

export default {

name: 'song-list',

props: {

songs: {

type: Array,

default: function () {

return []

}

}

},

methods: {

getDesc (song) {

return `${song.singer} · ${song.album}`

}

}

}

.song-slit{

position: relative;

width: 100%;

background: #f4f4f4;

}

.item{

align-items: center;

box-sizing: border-box;

height: 60px;

font-size: 14px;

left: 0;

}

.content{

flex: 1;

height: 60px;

line-height: 60px;

padding-left: 20px;

background: #f4f4f4;

margin: 0px 0 5px 0;

border-bottom: 1px solid #ddd;

}

.name{

font-size: 14px;

}

.desc{

font-size: 12px;

}

你期待的结果是什么？实际看到的错误信息又是什么？

是css的问题吗