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

本次的系列博文的知识点讲解和代码，主要是来自于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的官方文档

代码语言：javascript复制

// 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更新完成后就会调用

代码语言：javascript复制

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

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

代码语言：javascript复制

// 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"即可

代码语言：javascript复制

// 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插件，其参数和默认配置在这里不做过多的讲解，可自行查看官方文档

代码语言：javascript复制

// main.js

import VueLazyLoad from 'vue-lazyload'

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

代码语言：javascript复制

// recommend.vue

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

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

代码语言：javascript复制

// 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 上了，有需要的同学可自行下载

ecmascript

0 人点赞