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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏跟着阿笨一起玩NET

HTML中显示的文字自动换行

http://www.cnblogs.com/zjxbetter/articles/1323449.html

4.4K10
来自专栏守候书阁

vue组件开发练习--焦点图切换

vue用了有一段时间了,开发的后台管理系统也趋于完善,现在时间比较算是有点空闲吧!这个空闲时间我在研究vue的另外的一些玩法,比如组件,插件等。今天,我就分享一...

29310
来自专栏河湾欢儿的专栏

03-保存

存储所需内容 ctrl+c ctrl+n ctrl+v 或者直接拖动文件至新文件

9320
来自专栏xingoo, 一个梦想做发明家的程序员

JQuery向导插件Step——第一个阉割版插件

如果使用过JQuery Steps的朋友一定会发现这个插件有一个缺点,就是页面在第一次进入的时候,会进行一次很明显的DOM重绘——页面会闪一下。 尤其是前端...

42070
来自专栏菩提树下的杨过

额的神啊:AS3中Button被disable了,也会触发Click事件!

btnTest.addEventListener(MouseEvent.CLICK,btnTestClick); function btnTestClick(...

32870
来自专栏HTML5学堂

网络字体@font-face 如何处理网页中的特殊字体

HTML5学堂:随着网页的发展,网页中出现了越来越多的字体种类,网页自带的微软雅黑、宋体、黑体已经越来越难以满足设计的需要,那么,如何在网站中使用比较特殊的字体...

56850
来自专栏iKcamp

翻译 | 关键CSS和Webpack: 减少阻塞渲染的CSS的自动化解决方案

原文地址: Critical CSS and Webpack: Automatically Minimize Render-Blocking CSS 原文作者:...

29780
来自专栏web编程技术分享

【手把手】制作一个简单的HTML网页

1.2K90
来自专栏吴裕超

点击穿透原理及解决

一、事件触发顺序 PC网页上的大部分操作都是用鼠标的,即响应的是鼠标事件,包括mousedown、mouseup、mousemove和click事件。一次点击行...

79860
来自专栏落影的专栏

如何快速定位、分析、解决非Crash的BUG(iOS 11篇)

前言 众所周知,Bug是线上应用极力规避但又无法避免的。对于致命的Bug,我们可以通过Crash日志进行分析;对于无法复现的Bug、特定操作步骤引起的Bug、某...

44750

扫码关注云+社区

领取腾讯云代金券