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