VUE移动端音乐APP学习【四】：scroll组件及loading组件开发

scroll组件

制作scroll 组件，然后嵌套一个 DOM 节点，使得该节点就能够滚动。该组件中需要引入 BetterScroll 插件。

scroll.vue:

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

<script>
import BScroll from 'better-scroll';

export default {
  name: 'scroll',
  props: {
    probeType: {
      type: Number,
      default: 1,
    },
    click: {
      type: Boolean,
      default: true,
    },
    listenScroll: {
      type: Boolean,
      default: false,
    },
    data: {
      type: Array,
      default: null,
    },
  },
  mounted() {
    setTimeout(() => {
      this._initScroll();
    }, 20);
  },
  methods: {
    _initScroll() {
      if (!this.$refs.wrapper) {
        // eslint-disable-next-line no-useless-return
        return;
      }
      this.scroll = new BScroll(this.$refs.wrapper, {
        probeType: this.probeType,
        click: this.click,
      });
      if (this.listenScroll) {
        let me = this;
        this.scroll.on('scroll', (pos) => {
          me.$emit('scroll', pos);
        });
      }
    },
    disable() {
      this.scroll && this.scroll.disable();
    },
    enable() {
      this.scroll && this.scroll.enable();
    },
    refresh() {
      this.scroll && this.scroll.refresh();
    },
  },
  watch: {
    data() {
      setTimeout(() => {
        this.refresh();
      }, this.refreshDelay);
    },
  },
};
</script>

在 recommend 组件中引入 scroll 组件:

<scroll ref="scroll" class="recommend-content" :data="discList">
    <div>
       <div class="slider-wrapper" v-if="recommends.length">
          ...
    </div>
   </scroll>

import Scroll from '../../base/scroll/scroll';


components: {
    Slider,
    Scroll,
  },

 

注意：在 discList 数据渲染之前，scroll 组件所包裹的 DOM 节点是没有高度的，页面是无法滚动的，所以需要绑定数据，当discList 数据渲染后，scroll组件监听并调用refresh()方法才能使页面滚动。

 

由于轮播图和推荐歌单是两个不同接口返回的数据并且异步请求返回数据的时间点并不一致，scroll组件所监听到的数据就会不完整，所计算的DOM高度就偏小，会导致页面无法滚动或滚动不完整。

解决方法：

在图片中添加 loadImage 事件，当图片加载时就重新调用 scroll 组件的 refresh() 方法，重新计算 DOM 的高度，轮播图的图片有多张，每张图片加载后就会重新调用 refresh() 方法

<a :href="item.jumpurl">
    <img class="needsclick" @load="loadImage" :src="item.picurl" >
 </a>


loadImage() {
  if (!this.checkLoaded) {
      this.$refs.scroll.refresh();
      this.checkLoaded = true;
    }

},

图片懒加载

对于图片过多的页面，为了加速页面加载速度，需要将页面内未出现的可视区域内的图片先不加载，等到滚动到可视区的时候再去加载，也就是图片懒加载。

图片懒加载需要用到 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组件

loading.vue：

<template>
  <div class="loading">
    <img src="./loading.gif" alt="" width="24" height="24">
    <p class="desc">{{title}}</p>
  </div>
</template>

<script>
export default {
  name: 'loading',
  props: {
    title: {
      type: String,
      default: '正在载入……',
    },
  },
};
</script>

<style lang="scss" scoped>
.loading {
  width: 100%;
  text-align: center;

  .desc {
    line-height: 20px;
    font-size: $font-size-small;
    color: $color-text-l;
  }
}
</style>

在recommend.vue中使用loading组件：

<div class="loading-container" v-show="!discList.length">
      <loading></loading>
    </div>

import Loading from '../../base/loading/loading';


  components: {
    Slider,
    Scroll,
    Loading,
  },

效果图：

 

参考文章：https://www.jianshu.com/p/b7a61470b79d