[Vue音乐项目] 第六节 歌单列表
上节获取到歌单信息,本节遍历数据展示歌单列表,展示没有什么好写的不过是几行css样式的问题,为好的用户体验,添加上一些内容:滚动效果,懒加载及加载loading效果。
-
打开src/componnents/recommend/index.vue文件,敲写以下代码
<template> <div recommend> <m-slider> ... </mslider> //歌单列表容器 <div class="list"> <h1 class="title">热门推荐歌单</h1> <ul> //遍历歌单数据,显示出来 <li class="item" v-for="(item,key) in list" :key="key"> <div class="icon"> //歌单封面 <img v-lazy="item.imgurl" @load="imgLoaded" width="60" height="60"> </div> <div class="text"> //歌单名字 <h2 class="name">{{item.creator.name}}</h2> //歌单简介 <p class="description">{{item.dissname}}</p> </div> </li> </ul> </div> </div> </template> <script> export default { data() { return { //歌单数据,在上一节的方法里获取到的数据 list: null } } } </scrip> <style lang="stylus" scoped> //导入css变量 @import '~common/stylus/variable' .recommend //滚动效果的样式,提前写在这里,后面会用到 .scroll height: 90vh overflow: hidden //歌单容器 .list //‘热门推荐歌单’标题 .title height: 65px line-height: 65px text-align: center color: $color-theme background: $font-size-medium //单个歌单 .item display: flex box-sizing: border-box align-items: center padding: 0 20px 20px 20px //歌单封面 .icon flex: 0 0 60px width: 60px margin-right: 20px border-radius: 2px overflow: hidden .text display: flex flex-direction: column justify-content: center flex: 1 line-height: 20px overflow: hidden font-size: $font-size-medium //歌单名字 .name margin-bottom: 10px color: $color-text-d //歌单简介 .description color: $color-text-i </style>
-
打开src/base/scroll/index.vue(没有的话创建一个),做个滚动组件
// scroll/index.vue <template> //滚动容器,固定高度并设置overflow:hidden <div ref="wrapper"> //滚动内容,滚动容器下的唯一子元素,高度由内容撑开且大于父容器高度 <div> <slot></slot> </div> </div> <template> <script> export default { //接收父组件的数据 props: { probeType: { type: Number, default: 1 }, click: { type: Boolean, default: true }, data: { type: Array, default: null } }, //实例挂载后调用[1] mounted() { //避免获取不到高度的问题 this.$nextTick(()=>{ this._initScroll() }) }, methods: { //创建滚动实例 _initScroll() { if(!this.$refs.wrapper) return this.scroll = new Scroll(this.$refs.wrapper,{ probeType: this.probeType, click: this.click }) }, //允许滚动 enable() { this.scroll && this.scroll.enable() }, //禁止滚动 disable() { this.scroll && this.scroll.disable() }, //更新滚动,主要是高度变化的时候重新刷新实例 refresh() { this.scroll && this.scroll.refresh() }, }, watch: { //监测父组件传的data数据,动态跟新滚动实例[2] data() { setTimeout(()=>{ this.refresh() },20) } } } } <script>
-
回到scr/componnents/recommend/index.vue文件,调用滚动组件
<template> <div class="recommend"> //使用滚动组件,包裹住轮播图和歌单列表[3] <m-scroll> //轮播图 <m-slider> ... </m-slider> //歌单列表 <div class="list> ... </div> </mscroll> <div> </template> <script> //导入滚动组件[1] import 'scroll' from 'base/scroll' export default { //注册滚动组件[2] componnents: { 'm-scroll': scroll } } </script>
-
做完滚动组件,现在做一个懒加载的效果,数据未获取之前用某一图片代替
//[1]打开该文件之前,先打开cmd命令行安装vue-lazyload插件 npm install vue-lazyload --save-dev //[2]打开src/main.js文件,敲写以下代码 //导入插件 import vueLazyLoad from 'vue-lazyload' //注册插件 Vue.use(vueLazyLoad,{ loading: required('comon/image/default.png') }) //[3]打开src/componnents/recommend/index.vue,敲写以下代码 <template> //找到该标签 <img :src="item.imgurl" width="60" height="60"> //改为如下 load钩子避免多次触发 <img v-lazy="item.imgurl" @load="imgLoaded" width="60" height="60"> </template> <script> ... <sript>
-
歌单列表从获取数据到渲染有过程间隙,可通过loading达到用户体验优化
//[1] 打开src/base/loading/index.vue,敲写以下代码 <template> <div class="loading"> //加载符号 <img width="24" height="24" src="./loading.gif"> //加载提示 <p class="tip">{{title}}</p> </div> </template> <script type="text/ecmascript-6"> export default { props: { //自定义加载提示,由父组件传入 title: { type: String, default: '正在载入...' } } } </script> <style scoped lang="stylus" rel="stylesheet/stylus"> @import "~common/stylus/variable" //加载层 .loading width: 100% text-align: center //加载提示 .tip line-height: 20px font-size: $font-size-small color: $color-text-l </style> //[2]打开src/componnents/recommend/index.vue,使用该加载组件 <template> <div class="recommend> <m-srcoll> <m-slider> ... </m-slider> <div class="list"> <h1> ... </h1> <li> ... </li> //[2.3]使用组件,数据未获取之前显示该loading <m-loading v-if=" !list "> </m-loading> <div> </m-scroll> </div> </template> <script> //[2.1]引入组件 import loading from 'base/loading' export default { //[2.2]注册组件 componnents: { 'm-loading': loading } } </script>