Vue2.0 scroll 组件的抽象和应用

Unsplash

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

授权许可

0 系列文章目录

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

1 scroll 组件的抽象

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

// base/scroll.vue

<template>
  <div ref="wrapper">
    <slot></slot>
  </div>
</template>

<script type="text/ecmascript-6">
  import BScroll from 'better-scroll'

  export default {
    props: {
      probeType: {
        type: Number,
        default: 1
      },
      click: {
        type: Boolean,
        default: true
      },
      data: {
        type: Array,
        default: null
      }
    },
    mounted() {
      this.$nextTick(() => {
        this._initScroll()
      })
    },
    methods: {
      _initScroll() {
        if (!this.$refs.wrapper) {
          return
        }
        this.scroll = new BScroll(this.$refs.wrapper, {
          probeType: this.probeType,
          click: this.click
        })
      },
      disable() {
        this.scroll && this.scroll.disable()
      },
      enable() {
        this.scroll && this.scroll.enable()
      },
      refresh() {
        this.scroll && this.scroll.refresh()
      }
    },
    watch: {
      data() {
        this.$nextTick(() => {
            this.refresh()
        })
      }
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
</style>

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

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

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

// recommend.vue

<template>
  <div class="recommend" ref="recommend">
    <scroll class="recommend-content" :data="discList">
      ...
    </scroll>
  </div>
</template>

<script type="text/ecmascript-6">
  import Scroll from 'base/scroll/scroll'

  export default {
    ...
    components: {
      Scroll
    }
  }
</script>

运行结果

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

运行结果

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

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

// recommend.vue

<img @load="loadImage" :src="item.picUrl" class="slider-img needsclick">

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

<img width="60" height="60" v-lazy="item.picUrl">

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

// recommend.vue

<div class="loading-container" v-show="!discList.length">
  <mt-spinner type="fading-circle" :size="50" color="#fff"></mt-spinner>
</div>

运行结果

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

End of File

---

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