undefinedfix
Sign in

Vue jumps to a sub route. The component page of the sub route cannot be scrolled

Kroj edited in Fri, 29 Jul 2022

Problem description

Recently, we are imitating QQ music with Vue, and have written four basic components: recommendation, singer, ranking and search. Singer component is to get a singer list, click the singer and jump to the sub route. Singer detail component refers to a music list component. Music list component includes a title bar and a song list component. Song list component is all the songs of the singer. There is a problem when jumping to singer detail component Wait, the scroll bar can't scroll the data of the song list component. How can you solve this problem

The background of the problem and what methods have you tried

The mini UI scrolling plug-in doesn't work

Related codes

//Please paste the code text below (do not use pictures instead of codes)

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>

What are your expectations? What is the actual error message?

Is it CSS

2 Replies
mmeisner
commented on Fri, 29 Jul 2022

Have you solved it now?

Hotsndot
commented on Fri, 29 Jul 2022

Has it been solved

lock This question has been locked and the reply function has been disabled.