Vue2.0 scroll 组件的抽象和应用 | 音乐 WebApp （四）

Unsplash

本次的系列博文的知识点讲解和代码，主要是来自于 黄轶 在慕课网的 Vue 2.0 高级实战-开发移动端音乐WebApp 课程，由个人总结并编写，其代码及知识点部分，均有所更改和删减，关于更多 Vue 2.0 的知识和实际应用，还请大家购买课程进行学习实践，该系列博文的发布已得到黄轶老师的授权许可

授权许可

0 系列文章目录

01 Vue2.0 定制一款属于自己的音乐 WebApp
02 Vue2.0 路由配置及Tab组件开发
03 Vue2.0 数据抓取及Swiper组件开发
04 Vue2.0 scroll 组件的抽象和应用
05 Vue2.0 歌手数据获取及排序
06 Vue2.0 歌手列表滚动及右侧快速入口实现
07 Vue2.0 Vuex初始化及歌手数据的配置

1 scroll 组件的抽象

在这一小节中，我们将会抽象出一个 scroll 组件，scroll 组件嵌套一个 DOM 节点，该节点就能够滚动，我们会在该组件中引入 BetterScroll 插件，props 里参数的具体含义可查看 BetterScroll 的官方文档

// base/scroll.vue

为了在数据变化之后等待 Vue 完成更新 DOM ，我们在数据变化之后会立即使用 Vue.nextTick(callback)，这样回调函数在 DOM 更新完成后就会调用

mounted(){
    this.$nextTick(() => {
        //这里的代码会在dom渲染完毕运行
     })
}

然后我们在 recommend 组件中引入 scroll 组件，需要注意的是，当 scroll 组件初始化而 discList 数据未获取时，scroll 组件所包裹的 DOM 节点是没有高度的，页面是无法滚动的，所以我们要在 discList 数据渲染之后，scroll 组件监听并调用 refresh() 方法，才能使页面滚动

// recommend.vue

运行结果

因为轮播图和热门歌单为同一接口数据，我们在这里只需要监听一个数据即可，但如果这是分别两个不同接口所返回的数据，而异步请求返回数据的时间点并不是一致的，scroll 组件所监听到的数据就会不完整，所计算的 DOM 高度就偏小，导致页面无法滚动或滚动不完整

运行结果

我们在图片中添加 loadImage 事件，当图片加载时就重新调用 scroll 组件的 refresh() 方法，重新计算 DOM 的高度，轮播图的图片有多张，每张图片加载后就会重新调用 refresh() 方法，所以我们通过判断来加载一次即可

还需要注意的是，scroll 组件默认了 click 属性为 true，之后我们的轮播图和歌单都是可以被点击的，但一开始我们设置了 fastclick 所冲突，给需要点击的地方添加 class="needsclick" 即可

// recommend.vue



if (!this.checkloaded) {
  this.checkloaded = true
  this.$refs.scroll.refresh()
}

2 图片懒加载和 Loading 加载动画

图片懒加载我们用到的是 vue-lazyload 插件，其参数和默认配置在这里不做过多的讲解，可自行查看官方文档

// main.js

import VueLazyLoad from 'vue-lazyload'

Vue.use(VueLazyLoad, {
  loading: require('common/image/default.png')
})

// recommend.vue

Loading 的加载动画我们采用 Mint UI 组件库的 Spinner 组件

// recommend.vue


  

运行结果

该章节的内容到这里就全部结束了，源码我已经发到了 GitHub Vue_Music_04 上了，有需要的同学可自行下载

End of File

---

行文过程中出现错误或不妥之处在所难免，希望大家能够给予指正，以免误导更多人，最后，如果你觉得我的文章写的还不错，希望能够点一下喜欢和关注，为了我能早日成为优秀作者献上一发助攻吧，谢谢！^ ^