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

Question

问题描述

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

歌手组件是获取一个歌手列表，点击歌手跳转到子路由，歌手的所有歌曲singer-detail组件，singer-detail组件内引用了一个music-list组件，music-list组件包括一个标题栏和一个song-list组件，song-list组件是是该歌手的所有歌曲，遇到了一个问题，
当跳转到singer-detail组件的时候，滚动滚动条无法滚动song-list组件的数据，请问各位大佬这种问题该怎么解决

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

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

相关代码

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

singer组件的代码：
<template>
    <div class="singer" >
      <list-view :singer="singer" @select="selectSinger"></list-view>
      <router-view></router-view>
    </div>
</template>

<script>
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
  }
}
</script>

<style scoped>
.singer{
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>

singer-detail的代码：
<template>
  <transition name="slide" v-if="songs">
   <music-list :songs="songs" :title="title" :bg-image="bgImage"></music-list>
  </transition>
</template>

<script>
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()
  }
}
</script>

<style scoped>
  .slide-enter-active, .slide-leave-active{
    transition: all 0.3s;
  }
  .slide-enter, .slide-leave-to{
    transform: translate3d(100%, 0, 0);
  }
</style>

music-list的代码：
<template>
    <div class="music-list">
      <mt-header :title="title">
        <mt-button icon="back" >返回</mt-button>
      </mt-header>
      <div>
        <song-list :songs="songs"></song-list>
      </div>
    </div>
</template>

<script>
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
  }
}
</script>

<style scoped>
  .music-list{
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: #f4f4f4;
  }
</style>
song-list的代码：
<template>
    <div class="song-slit">
      <ul style="padding: 0" class="list-unstyled">
        <li v-for="(song, index) in songs" :key="index" class="item">
          <div class="content">
            <h2 class="name">{{song.name}}</h2>
            <h5 class="desc">{{getDesc(song)}}</h5>
          </div>
        </li>
      </ul>
    </div>
</template>

<script>
export default {
  name: 'song-list',
  props: {
    songs: {
      type: Array,
      default: function () {
        return []
      }
    }
  },
  methods: {
    getDesc (song) {
      return `${song.singer} · ${song.album}`
    }
  }
}
</script>

<style scoped>
.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;
}
</style>

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

是css的问题吗

Answer 1

请问你现在解决了吗？

Answer 2

请问解决了吗