儿歌三百首

JS

懒加载

封装

import logo from "../assets/logo.png";

export default {
  mounted(el, binding) {
    const src = binding.value;
    el.src = logo;
    Window.vLazy = Window.vLazy || newVLazy(src);
    Window.vLazy.observe(el);
  }
};

function newVLazy(src) {
  return new IntersectionObserver((entries) => {
    entries.forEach((item) => {
      if (item.isIntersecting) setTimeout(() => (item.target.src = src), 600);
    });
  });
}

使用

<template>
  <img
    v-for="(pic, index) in data.list"
    :key="index"
    v-lazy="pic"
    alt="Vue logo"
  />
</template>

<script>
import { reactive } from "vue";
import lazy from "./directive/v-lazy"; // <<-----

export default {
  name: "App",
  directives: { lazy }, // <<--------
  setup() {
    const data = reactive({
      list: [
        "http://img3.a0bi.com/upload/ttq/20161015/1476518118768.png",
        "http://img3.a0bi.com/upload/ttq/20161015/1476518118768.png",
        "http://img3.a0bi.com/upload/ttq/20161015/1476518118768.png",
        "http://img3.a0bi.com/upload/ttq/20161015/1476518118768.png",
        "http://img3.a0bi.com/upload/ttq/20161015/1476518118768.png",
        "http://img3.a0bi.com/upload/ttq/20161015/1476518118768.png",
        "http://img3.a0bi.com/upload/ttq/20161015/1476518118768.png",
        "http://img3.a0bi.com/upload/ttq/20161015/1476518118768.png",
        "http://img3.a0bi.com/upload/ttq/20161015/1476518118768.png",
        "http://img3.a0bi.com/upload/ttq/20161015/1476518118768.png",
      ],
    });

    return { data };
  },
};
</script>

<style>
img {
  display: block;
}
</style>

数字动画

拖拽

高度过渡动画

• height: auto无法触发动画

css

文本

省略号

动画

svg飞线

svg加载动画

图形

饼图

布局

BFC

清除浮动

垂直居中

flex+margin