# vueLazyComponent

**Repository Path**: MustacheZ/vueLazyComponent

## Basic Information

- **Project Name**: vueLazyComponent
- **Description**: vue组件懒加载
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2020-04-04
- **Last Updated**: 2021-12-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vueLazyCompoment

## 插件安装
```
npm install @xunlei/vue-lazy-component
```

### 注册插件
```
import Vue from 'vue'
import VueLazyComponent from '@xunlei/vue-lazy-component'
 
Vue.use(VueLazyComponent)
```

### 使用方式
```
<vue-lazy-component>
  <!-- 要放置的组件 -->
  <item />
  <!-- 骨架组件 -->
  <skeleton slot="skeleton" />
</vue-lazy-component>
```

### 注意
```
    1、机制大概就是一开始是加载骨架组件，然后滚动的时候通过判断骨架组件准备显示在浏览器视口的时候，通过 v-if 来控制显示相对应的项目内容组件；
    2、（重点）骨架组件一定得设height，因为一加载的时候整个视图的滚动条是通过所有骨架组件的height来撑出来的，如果不设置height或者所有的height加起来不足以撑出滚动条，那么根据机制[1]就会一进页面就会把所有的组件全部加载出来(很深的坑)；（骨架组件：通俗的解释就是一个还没加载之前的一个loading占位符，自定义）
    3、缺点：因为机制问题，所以如果都用同一个骨架组件，那么当内容组件的height值跟骨架组件的height不相等，滚动的时候会出现滚动条闪烁的情况，体验交互上的视觉效果不是很好；想到的解决办法就是先按正常开发完后，然后根据所有组件的最低高度单独分配一个骨架组件；
```

### more...
 [vue-lazy-component](https://www.npmjs.com/package/@xunlei/vue-lazy-component).