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的问题吗
vue路由跳转子组件_vue跳转到子路由子路由的组件页面无法滚动相关推荐
- vue路由登录拦截器_Vue路由器
vue路由登录拦截器 介绍 (Introduction) In a JavaScript web application, a router is the part that syncs the cu ...
- vue中页面跳转传值_vue跳转方式(打开新页面)及传参操作示例
本文实例讲述了vue跳转方式(打开新页面)及传参操作.分享给大家供大家参考,具体如下: 1. router-link跳转 // 直接写上跳转的地址 link跳转 // 添加参数 // 参数获取 id ...
- vue 实现动态增加输入框_vue实现一个6个输入框的验证码输入组件
要实现的功能: 完全和单输入框一样的操作,甚至可以插入覆盖: 1,限制输入数字 2,正常输入 3,backspace删除 4,paste任意位置粘贴输入 5,光标选中一个数字,滚轮可以微调数字大小,限 ...
- vue路由模式实现原理
vue路由有两种模式(通过改变 URL,在不重新请求页面的情况下,更新页面视图) 一种hash模式(URL有#) 实现原理: 一种history模式(URL无#) 实现原理: 这两种模式区别看有无#
- active vue 路由样式保持_Vue 解决父组件跳转子路由后当前导航active样式消失问题...
举个栗子,导航栏如下图,当前新闻资讯的路由是:localhost:8083/#/new,导航栏样式如图所示: 随便挑个新闻点击后会跳转到子路由:localhost:8083/#/new/newDeta ...
- 微信vue路由跳转兼容_vue使用感受(二)组件间跳转
想要看代码高亮的可以去我的微信公众号(pearapple_2015)查看. 昨天我们聊了一下vue的组件间传值,今天来讨论下我遇到的第二个问题组件间跳转.在不使用前端框架的时候,如果我们要点击菜单跳转 ...
- 微信vue路由跳转兼容_Vue微信公众号开发踩坑记录
需求 微信授权登录(基于公众号的登录方案) 接入JS-SDK实现图片上传,分享等功能 现状及难点 采用的Vue框架,前后端分离模式(vue工程仅作为客户端),用户通过域名访问的是客户端,但是微信授权中 ...
- vue中局部页面跳转_vue使用感受(二)组件间跳转
想要看代码高亮的可以去我的微信公众号(pearapple_2015)查看. 昨天我们聊了一下vue的组件间传值,今天来讨论下我遇到的第二个问题组件间跳转.在不使用前端框架的时候,如果我们要点击菜单跳转 ...
- vue路由跳转控制台出现:vue-router.esm.js?8c4f:2316 TypeError: Cannot read properties of undefined (reading ‘$c
vue路由跳转控制台出现:vue-router.esm.js?8c4f:2316 TypeError: Cannot read properties of undefined (reading '$c ...
最新文章
- js1:对象的学习,构造函数,继承构造函数【使用教材:JavaScript深度剖析第2版】...
- 蛇形矩阵c 语言怎么写,蛇形矩阵输出是要怎么写代码,感觉没有眉目啊,大佬能说一下思想吗...
- VC中海量文件读写类设计与应用(转)
- python网络编程之 一 socket(套接字)
- 不能比较或排序text、ntext和image数据类型,除非使用IS NULL 或 LIKE 运算符。
- 猿辅导的python课_每天自学俩小时Python,改变命运足矣
- android5.1使用SerialManagerService
- hive sql脚本学习
- CSF 格式文件播放器 下载地址
- 上海智能交通建设现状与未来发展要点
- [963]Android app代理软件
- PCB Layout的10个细节
- 【剑指offer】19. 二叉树的镜像
- matlab 中的波浪号
- 数学----第一个重要极限证明
- BT06串口蓝牙模块的配置以及与电脑的配对
- Zabbix 配置钉钉告警
- 辨别虚假高音质(320k/Ape/Flac)的音乐文件
- 21年新版kali安装
- bochs linux 安装软件,bochs linux镜像