005_Vue音乐播放器（推荐页滚动优化、图片懒加载、以及对第三方ui库的样式穿透修改样式）

最新推荐文章于 2022-07-15 18:18:10 发布

原创最新推荐文章于 2022-07-15 18:18:10 发布 · 453 阅读

1 ·

CC 4.0 BY-SA版权

Vue音乐播放器专栏收录该内容

14 篇文章

订阅专栏

这篇讲的内容比较简单，是使用 better-scroll 组件和 vant的图片懒加载

better-scroll 的使用

首先，在不使用better-scroll 的时候，滑动页面，头部的顶部栏和导航栏会跟着滑动，这不是我们所想要的，我们只需要下面的轮播图和推荐歌曲列表滑动即可，这是使用前后的效果图。

首先使用 cnpm install better-scroll --save-dev 安装better-scroll

然后创建一个公用的scroll组件，具体写法如下，每个函数的用法请参照其 better-scroll官网
<template>
  <div ref="wrapper" class="wrapper">
    
    <slot></slot>
  </div>
</template>

<script>
import BScroll from "better-scroll";
export default {
  props: {
    probeType: {
      type: Number,
      default: 1
    },
    click: {
      type: Boolean,
      default: true
    },
    data: {
      type: Array,
      default: null
    }
  },
  mounted() {
    //定时器确保页面节点已渲染完成
    setTimeout(() => {
      this._initScroll();
    }, 20);
  },
  methods: {
    _initScroll() {
      if (!this.$refs.wrapper) {
        return;
      }
      this.scroll = new BScroll(this.$refs.wrapper, {
        probeType: this.probeType,
        click: this.click
      });
    },
    enable() {
      this.scroll && this.scroll.enable();
    },
    disable() {
      this.scroll && this.scroll.disable();
    },
    refresh() {
      //刷新，重新计算高度
      this.scroll && this.scroll.refresh();
    }
  },
  watch: {
    data() {
      //观察data变化，refresh函数重新计算scroll
      setTimeout(() => {
        this.refresh();
      }, 20);
    }
  }
};
</script>

<style scoped>
.wrapper {
  overflow: hidden;
  width: 100%;
  height: 100vh;
}
</style>
然后在我们的recommend推荐组件中引入使用即可（已设置插槽，将原来的节点放在scroll组件包裹下即可）

vant图片懒加载

一开始使用的是vueLazyload，但是照着官网上弄了很久，loading的加载图都出不来，果断弃用，选择vant的图片懒加载。

具体用法也非常简单，cnpm install vant --save 下载vant，然后直接引入其Lazyload即可，然后在组件中的图片使用v-lazy来代替：src，就能实现懒加载效果了。

样式穿透

在使用element-ui的loading加载的时候，由于字体太小不够美观，想要修改它的样式，又由于是第三方ui库，在style设定了scoped使得我们自定义的样式无法修改第三方ui库的样式，因此使用样式穿透，即 >>> ，或者 /deep/ 操作符( >>> 的别名)。

穿透方法实际上违反了scoped属性的意义。通常能写在index中的样式尽量写在index中，我们可以通过在index样式中通过外层组件添加唯一class来区分组件+第三方样式来实现实现了类似于scoped的效果（即less的样式层级关系），又方便修改各种第三方组件的样式。

对element-ui的loading使用样式穿透后的效果