Skip to content

Commit c6e902f

Browse files
毕宇旗BiYuqi
毕宇旗
authored and
BiYuqi
committed
chore: update doc
1 parent f880655 commit c6e902f

File tree

3 files changed

+215
-36
lines changed

3 files changed

+215
-36
lines changed

‎.travis.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ node_js: stable
66
# - node_modules
77

88
before_install:
9-
- export TZ='Asia/Beijing' # 更改时区
9+
- export TZ='Asia/Beijing'
1010

1111
install:
1212
- npm install

‎README.md‎

Lines changed: 39 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,28 @@
11
# [vue-intersection-observer](https://github.com/BiYuqi/vue-intersection-observer)
22

3-
## 前言
4-
**Vue Intersection Observer** 是一个Vue组件，基于[IntersectionObserver API](https://developer.mozilla.org/zh-CN/docs/Web/API/Intersection_Observer_API)的集成, 包装，便于实现需要用到元素交集变化的信息.
3+
[简体中文](https://github.com/BiYuqi/vue-intersection-observer/blob/master/README.zh-CN.md) | English
54

6-
比如：
7-
* 当页面滚动时，实现懒加载图片功能。
8-
* 实现`可无限滚动`网站，也就是当用户滚动网页时直接加载更多内容，无需翻页。
9-
* 为计算广告收益，检测其广告元素的曝光情况。
10-
* 根据用户是否已滚动到相应区域来灵活开始执行任务或动画
5+
## Preface
6+
The **Vue Intersection Observer** is a Vue component based on the [IntersectionObserver API](https://developer.mozilla.org/zh-CN/docs/Web/API/Intersection_Observer_API) integration, the packaging facilitates the implementation of information that needs to be used for element intersection changes.
117

12-
## 如何使用 ( How to use? )
8+
For example.
9+
* Implementation of the lazy loading of images when the page is scrolled.
10+
* Implementation of 'infinitely scrollable' websites, i.e. more content is loaded directly when the user scrolls the page, without turning the page.
11+
* Detection of the exposure of its advertising elements for the purpose of calculating advertising revenue.
12+
* Flexibility to start tasks or animations depending on whether the user has scrolled to the appropriate area or not.
13+
14+
## Usage
1315

1416
```js
1517
npm i vue-intersection-observer -S
1618
```
1719

18-
在懒加载图片中使用(Usage in Lazy-load-image):
20+
Use in Lazy-load-image:
1921

2022
[Demo](https://biyuqi.github.io/vue-intersection-observer/#/lazy-load)
2123

2224
```js
23-
<!-- 基于本插件封装LazyImage组件 -->
25+
// Wrapping the LazyImage component based on this plug-in
2426
<template>
2527
<observer @on-change="onChange" class="test-lazy">
2628
<img height="200" style="max-width: 100%" :src="currentInfo" alt="">
@@ -45,7 +47,7 @@ export default {
4547
},
4648
methods: {
4749
onChange(entry, unobserve) {
48-
// 加载后 取消监听,优化性能
50+
// After loading Cancel monitoring, optimise performance
4951
if (entry.isIntersecting) {
5052
unobserve()
5153
}
@@ -54,11 +56,12 @@ export default {
5456
}
5557
}
5658
```
57-
实战懒加载：
59+
Practical lazy loading.
60+
5861
```js
5962
<template>
6063
<div class="w800">
61-
<div class="header">图片懒加载测试<i class="tips">请快速向下滚动屏幕测试懒加载</i></div>
64+
<div class="header">Image lazy loading test<i class="tips">Please scroll down the screen quickly to test lazy loading</i></div>.
6265
<div class="content"></div>
6366
<div v-for="item in imgList" :key="item" class="img-box-mock">
6467
<LazyImage :imageSrc="item"></LazyImage>
@@ -81,19 +84,20 @@ export default {
8184
</script>
8285
```
8386

84-
在普通场景中使用(Usage in normal):
87+
Use in normal scenarios (Usage in normal):
88+
8589
```js
8690
<template>
8791
<div>
8892
<div class="left w800">
8993
<div class="header w800" :class="{active: visible}">
90-
检测元素从屏幕区域显示隐藏{{visible ? 'visible' : 'unvisible'}}
94+
Detects when an element is displayed hidden from the screen area {{visible ? 'visible' : 'unvisible'}}}
9195
</div>
9296
<div class="content">
9397
Please Scroll Page Down and Up To Test
9498
</div>
9599
<observer @on-change="onChange">
96-
<div class="test" :class="{active: visible}">终于出现了</div>
100+
<div class="test" :class="{active: visible}">At last</div>.
97101
</observer>
98102
</div>
99103
</div>
@@ -125,48 +129,48 @@ Optionally add the polyfill and make sure it's required on your dependendencies
125129
npm install --save intersection-observer
126130
```
127131

128-
## IntersectionObserver做了些什么( What does IntersectionObserver do? )
132+
## What does IntersectionObserver do?
129133

130-
![](http://loadingmore-1254319003.coscd.myqcloud.com/observe.png)
134+
! [](http://loadingmore-1254319003.coscd.myqcloud.com/observe.png)
131135

132-
## 为什么要用这个组件 ( Why use this component? )
136+
## Why use this component?
133137

134-
该组件的目的是为观察在Vue代码库上进入视口的元素提供最简单的解决方案. 它完全是声明性的，所有复杂性都被抽象出来,专注于可重用性和低内存消耗.
138+
The purpose of this component is to provide the simplest solution for observing the elements that enter the viewport on the Vue codebase. It is completely declarative, all complexity is abstracted away, and the focus is on reusability and low memory consumption.
135139

136-
## 文档 ( Documentation )
140+
## Documentation
137141

138142
[DEMO](https://biyuqi.github.io/vue-intersection-observer)
139143

140144
## Options And Method
141-
Name | Type | Default | Required | Description
145+
Name | Type | Default | Required | Description
142146
--------- | --------- | --------- | --------- | ---------
143-
root | HTMLElement | | false | 如果root参数指定为null或者不指定的时候默认使用浏览器视口做为root
144-
rootMargin | String | '0px' | false | 定义根元素的margin，用来扩展或缩小rootBounds这个矩形的大小，从而影响intersectionRect交叉区域的大小。它使用CSS的定义方法，比如10px 20px 30px 40px，表示 top、right、bottom 和 left 四个方向的值
145-
threshold | Number or Array\<number> | 0 | false | threshold属性决定了什么时候触发回调函数。它是一个数组，每个成员都是一个门槛值，默认为[0]，即交叉比例（intersectionRatio）达到0时触发回调函数
146-
on-change | Function | | required | (entry, unobserve) => {}
147+
root | HTMLElement | false | default browser viewport is used as root if root is specified as null or unspecified.
148+
rootMargin | String | '0px' | false | defines the margin of the root element, which is used to expand or reduce the size of the rootBounds rectangle and thus affects the size of the intersection area of the intersectionRect. It uses CSS definitions such as 10px 20px 30px 40px to represent the values of top, right, bottom and left.
149+
threshold | Number or Array\<number> | 0 | false | The threshold property determines when the callback function is triggered. It is an array where each member is a threshold value, which defaults to [0], i.e. when the intersectionRatio reaches 0, the callback function is triggered.
150+
on-change | Function | required | (entry, unobserve) => {}
147151

148-
## Method Detail Callback parms
152+
## Method Detail Callback params
149153
```js
150154
<observer @on-change="onChange" class="test-lazy">
151155
<img height="200" style="max-width: 100%" :src="currentInfo" alt="">
152156
</observer>
153157

154158
onChange(entry, unobserve) {
155159
// entry:
156-
// time：可见性发生变化的时间，是一个高精度时间戳，单位为毫秒
160+
// time: the time at which the change in visibility occurred, a high-precision time stamp in milliseconds
157161

158-
// target：被观察的目标元素，是一个 DOM 节点对象
162+
// target: the target element to be observed, which is a DOM node object
159163

160-
// rootBounds：根元素的矩形区域的信息，
164+
// rootBounds: information about the rectangular area of the root element.
161165

162-
// getBoundingClientRect()方法的返回值，如果没有根元素（即直接相对于视口滚动），则返回null
166+
// Return value of the getBoundingClientRect() method, or null if there is no root element (i.e. scrolling directly relative to the viewport).
163167

164-
// boundingClientRect：目标元素的矩形区域的信息
168+
// boundingClientRect: Information about the rectangular area of the target element.
165169

166-
// intersectionRect：目标元素与视口（或根元素）的交叉区域的信息
167-
// isIntersecting: boolean 返回当前元素在可视区域是否显示 (很重要，大部分场景基于此字段判断)
170+
// intersectionRect: Information about the intersection area of the target element with the viewport (or root element)
171+
// isIntersecting: boolean returns whether the current element is displayed in the visible area (important, most scenarios are based on this field)
168172

169-
// intersectionRatio：目标元素的可见比例，即intersectionRect占boundingClientRect的比例，完全可见时为1，完全不可见时小于等于0
173+
// intersectionRatio: the visible ratio of the target element, i.e. the ratio of the intersectionRect to the bindingClientRect, 1 if fully visible, less than or equal to 0 if not visible at all
170174
// unobserve
171175
// The method can remove target describe
172176
}

‎README.zh-CN.md‎

Lines changed: 175 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,175 @@
1+
# [vue-intersection-observer](https://github.com/BiYuqi/vue-intersection-observer)
2+
3+
简体中文 | [English](https://github.com/BiYuqi/vue-intersection-observer/blob/master/README.md)
4+
5+
## 前言
6+
**Vue Intersection Observer** 是一个Vue组件，基于[IntersectionObserver API](https://developer.mozilla.org/zh-CN/docs/Web/API/Intersection_Observer_API)的集成, 包装，便于实现需要用到元素交集变化的信息.
7+
8+
比如：
9+
* 当页面滚动时，实现懒加载图片功能。
10+
* 实现`可无限滚动`网站，也就是当用户滚动网页时直接加载更多内容，无需翻页。
11+
* 为计算广告收益，检测其广告元素的曝光情况。
12+
* 根据用户是否已滚动到相应区域来灵活开始执行任务或动画
13+
14+
## 如何使用 ( How to use? )
15+
16+
```js
17+
npm i vue-intersection-observer -S
18+
```
19+
20+
在懒加载图片中使用(Usage in Lazy-load-image):
21+
22+
[Demo](https://biyuqi.github.io/vue-intersection-observer/#/lazy-load)
23+
24+
```js
25+
<!-- 基于本插件封装LazyImage组件 -->
26+
<template>
27+
<observer @on-change="onChange" class="test-lazy">
28+
<img height="200" style="max-width: 100%" :src="currentInfo" alt="">
29+
</observer>
30+
</template>
31+
32+
<script>
33+
import Observer from 'vue-intersection-observer'
34+
export default {
35+
data() {
36+
return{
37+
currentInfo: false
38+
}
39+
},
40+
props: {
41+
imageSrc: {
42+
type: [String, Number]
43+
}
44+
},
45+
components: {
46+
Observer
47+
},
48+
methods: {
49+
onChange(entry, unobserve) {
50+
// 加载后 取消监听,优化性能
51+
if (entry.isIntersecting) {
52+
unobserve()
53+
}
54+
this.currentInfo = entry.isIntersecting ? this.imageSrc : 'https://avatars2.githubusercontent.com/u/20992106?s=460&v=4'
55+
}
56+
}
57+
}
58+
```
59+
实战懒加载：
60+
```js
61+
<template>
62+
<div class="w800">
63+
<div class="header">图片懒加载测试<i class="tips">请快速向下滚动屏幕测试懒加载</i></div>
64+
<div class="content"></div>
65+
<div v-for="item in imgList" :key="item" class="img-box-mock">
66+
<LazyImage :imageSrc="item"></LazyImage>
67+
</div>
68+
</div>
69+
</template>
70+
71+
<script>
72+
import LazyImage from './LazyImage'
73+
export default {
74+
data() {
75+
return {
76+
imgList: []
77+
}
78+
},
79+
components: {
80+
LazyImage
81+
}
82+
}
83+
</script>
84+
```
85+
86+
在普通场景中使用(Usage in normal):
87+
```js
88+
<template>
89+
<div>
90+
<div class="left w800">
91+
<div class="header w800" :class="{active: visible}">
92+
检测元素从屏幕区域显示隐藏{{visible ? 'visible' : 'unvisible'}}
93+
</div>
94+
<div class="content">
95+
Please Scroll Page Down and Up To Test
96+
</div>
97+
<observer @on-change="onChange">
98+
<div class="test" :class="{active: visible}">终于出现了</div>
99+
</observer>
100+
</div>
101+
</div>
102+
</template>
103+
104+
<script>
105+
import Observer from 'vue-intersection-observer'
106+
export default {
107+
data() {
108+
return{
109+
visible: false
110+
}
111+
},
112+
components: {
113+
Observer
114+
},
115+
methods: {
116+
onChange(entry, obv) {
117+
this.visible = entry.isIntersecting
118+
}
119+
}
120+
}
121+
</script>
122+
```
123+
124+
Optionally add the polyfill and make sure it's required on your dependendencies for unsupporting browsers:
125+
126+
```js
127+
npm install --save intersection-observer
128+
```
129+
130+
## IntersectionObserver做了些什么( What does IntersectionObserver do? )
131+
132+
![](http://loadingmore-1254319003.coscd.myqcloud.com/observe.png)
133+
134+
## 为什么要用这个组件 ( Why use this component? )
135+
136+
该组件的目的是为观察在Vue代码库上进入视口的元素提供最简单的解决方案. 它完全是声明性的，所有复杂性都被抽象出来,专注于可重用性和低内存消耗.
137+
138+
## 文档 ( Documentation )
139+
140+
[DEMO](https://biyuqi.github.io/vue-intersection-observer)
141+
142+
## Options And Method
143+
Name | Type | Default | Required | Description
144+
--------- | --------- | --------- | --------- | ---------
145+
root | HTMLElement | | false | 如果root参数指定为null或者不指定的时候默认使用浏览器视口做为root
146+
rootMargin | String | '0px' | false | 定义根元素的margin，用来扩展或缩小rootBounds这个矩形的大小，从而影响intersectionRect交叉区域的大小。它使用CSS的定义方法，比如10px 20px 30px 40px，表示 top、right、bottom 和 left 四个方向的值
147+
threshold | Number or Array\<number> | 0 | false | threshold属性决定了什么时候触发回调函数。它是一个数组，每个成员都是一个门槛值，默认为[0]，即交叉比例（intersectionRatio）达到0时触发回调函数
148+
on-change | Function | | required | (entry, unobserve) => {}
149+
150+
## Method Detail Callback parms
151+
```js
152+
<observer @on-change="onChange" class="test-lazy">
153+
<img height="200" style="max-width: 100%" :src="currentInfo" alt="">
154+
</observer>
155+
156+
onChange(entry, unobserve) {
157+
// entry:
158+
// time：可见性发生变化的时间，是一个高精度时间戳，单位为毫秒
159+
160+
// target：被观察的目标元素，是一个 DOM 节点对象
161+
162+
// rootBounds：根元素的矩形区域的信息，
163+
164+
// getBoundingClientRect()方法的返回值，如果没有根元素（即直接相对于视口滚动），则返回null
165+
166+
// boundingClientRect：目标元素的矩形区域的信息
167+
168+
// intersectionRect：目标元素与视口（或根元素）的交叉区域的信息
169+
// isIntersecting: boolean 返回当前元素在可视区域是否显示 (很重要，大部分场景基于此字段判断)
170+
171+
// intersectionRatio：目标元素的可见比例，即intersectionRect占boundingClientRect的比例，完全可见时为1，完全不可见时小于等于0
172+
// unobserve
173+
// The method can remove target describe
174+
}
175+
```

0 commit comments

Comments
 (0)