feat: Change the default value of immediate-check to true and modify README.md

staticdeng · staticdeng · commit cb1e176f8dc1 · 2021-12-30T11:35:59.000+08:00
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,5 @@
+# build lib
+lib
 # Logs
 logs
 *.log
diff --git a/README.md b/README.md
@@ -1,10 +1,14 @@
 # vuejs-loadmore
-[![Build Status](https://img.shields.io/github/workflow/status/staticdeng/vuejs-loadmore/Node.js%20CI)](https://github.com/staticdeng/vuejs-loadmore/actions)
+[![Npm Version](https://img.shields.io/npm/v/vuejs-loadmore)](https://www.npmjs.com/package/vuejs-loadmore) [![Build Status](https://img.shields.io/github/workflow/status/staticdeng/vuejs-loadmore/Node.js%20CI)](https://github.com/staticdeng/vuejs-loadmore/actions)
+
+[![NPM](https://nodei.co/npm/vuejs-loadmore.png)](https://nodei.co/npm/vuejs-loadmore/)
 
 A pull-down refresh and pull-up loadmore scroll component for Vue.js.
 
 Easy to use by providing simple api. Unlike other component libraries, it uses the browser itself to scroll instead of js, so it has a smaller code size but does not lose the user experience.
 
+**English** | [中文](./README.zh-CN.md)
+
 ## Preview
 [Online demo](https://staticdeng.github.io/vuejs-loadmore/)
 
@@ -46,7 +50,7 @@ The `on-refresh` and  `on-loadmore` will be Emitted when pull refresh or scroll
 
 If you don't need refresh, only not to bind `on-refresh`.
 
-When the data request is completed, the data `finished` needs to be changed to true.
+When the data request is finished, the data of `finished` you can changed to true, then will show `finished-text`.
 
 ```js
 export default {
@@ -58,6 +62,9 @@ export default {
       finished: false
     };
   },
+  mounted() {
+    this.fetch();
+  },
   methods: {
     onRefresh(done) {
       this.list = [];
@@ -137,7 +144,7 @@ export default {
 | immediate-check | Whether to check loadmore position immediately after mounted | _boolean_ | `true` |
 | load-offset | The `on-loadmore` will be Emitted when the distance from the scroll bar to the bottom is less than the `load-offset` | _number \| string_ | `50` |
 | finished | Whether the data is loaded | _boolean_ | `false` |
-| error | Whether the data is loaded, the `on-loadmore` will be Emitted only when error text clicked, the `sync` modifier is needed | _boolean_ | `false` |
+| error | Whether the data is loaded error, the `on-loadmore` will be Emitted only when error text clicked, the `sync` modifier is needed | _boolean_ | `false` |
 | loading-text | The Text when loading in loaded | _string_ | `正在加载` |
 | finished-text | The Text when the data is loaded  | _string_ | `没有更多了` |
 | error-text | The Text when error loaded | _string_ | `请求失败，点击重新加载` |
diff --git a/README.zh-CN.md b/README.zh-CN.md
@@ -0,0 +1,169 @@
+# vuejs-loadmore
+[![Npm Version](https://img.shields.io/npm/v/vuejs-loadmore)](https://www.npmjs.com/package/vuejs-loadmore) [![Build Status](https://img.shields.io/github/workflow/status/staticdeng/vuejs-loadmore/Node.js%20CI)](https://github.com/staticdeng/vuejs-loadmore/actions)
+
+[![NPM](https://nodei.co/npm/vuejs-loadmore.png)](https://nodei.co/npm/vuejs-loadmore/)
+
+一个Vue.js 的下拉刷新和上拉加载组件。
+
+通过提供简单的api易于使用。与其他组件库不同，它使用浏览器本身而不是js来滚动容器，因此它的代码量更小，但不损失用户体验。
+
+**中文** | [English](./README.md)
+
+## 预览
+[在线demo](https://staticdeng.github.io/vuejs-loadmore/)
+
+也可以扫描以下二维码访问演示：
+
+<img src="https://user-images.githubusercontent.com/20060839/145163261-02025f86-ac87-4016-859f-15677a6d3cf7.png" width="220" height="220" >
+
+## 安装 & 使用
+
+#### 安装 npm 包
+
+```bash
+# npm
+npm install vuejs-loadmore --save
+```
+
+#### 全局导入
+
+```js
+import Vue from 'vue';
+import VueLoadmore from 'vuejs-loadmore';
+
+Vue.use(VueLoadmore);
+```
+
+## 用法
+
+### 基础用法
+
+```html
+<vue-loadmore 
+  :on-refresh="onRefresh" 
+  :on-loadmore="onLoad"
+  :finished="finished">
+  <div v-for="(item, i) of list" :key="i"></div>
+</vue-loadmore>
+```
+`on-refresh` 和 `on-loadmore` 会在下拉刷新或滚动到底部时触发，需要在处理完数据请求后执行回调函数 `done()`。 
+
+如果你不需要刷新，只需要不绑定`on-refresh`。
+
+当数据请求完成后，你可以将`finished`的数据改为true，这样就会显示`没有更多了`。
+
+```js
+export default {
+  data() {
+    return {
+      list: [],
+      page: 1,
+      pageSize: 10,
+      finished: false
+    };
+  },
+  mounted() {
+    this.fetch();
+  },
+  methods: {
+    onRefresh(done) {
+      this.list = [];
+      this.page = 1;
+      this.finished = false;
+      this.fetch();
+
+      done();
+    },
+
+    onLoad(done) {
+      if (this.page <= 10) {
+        this.fetch();
+      } else {
+        // all data loaded
+        this.finished = true;
+      }
+      done();
+    },
+
+    fetch() {
+      for (let i = 0; i < this.pageSize; i++) {
+        this.list.push(this.list.length + 1);
+      }
+      this.page++;
+    }
+  },
+}
+```
+
+### 错误提示
+
+```html
+<vue-loadmore 
+  :on-loadmore="onLoad"
+  :finished="finished"
+  :error.sync="error">
+  <div v-for="(item, i) of list" :key="i"></div>
+</vue-loadmore>
+```
+
+```js
+export default {
+  data() {
+    return {
+      list: [],
+      finished: false,
+      error: false,
+    };
+  },
+  methods: {
+    onLoad() {
+      fetchSomeThing().catch(() => {
+        this.error = true;
+      });
+    },
+  },
+};
+```
+
+## API
+
+### Props
+
+| Attribute | Description | Type | Default |
+| --- | --- | --- | --- |
+| on-refresh | 顶部下拉触发 | _function_ | - |
+| pulling-text | 下拉显示文本 | _string_ | `下拉刷新` |
+| loosing-text | 释放显示文本 | _string_ | `释放刷新` |
+| loading-text | 正在刷新显示文本 | _string_ | `正在刷新` |
+| success-text | 刷新完成显示文本 | _string_ | `刷新完成` |
+| show-success-text | 是否显示`success-text` | _boolean_ | `true` |
+| pull-distance | 触发正在刷新状态的距离 | _number \| string_ | `50` |
+| head-height | 正在刷新显示区域的高度  | _number \| string_ | `50` |
+| animation-duration | 下拉刷新动画持续时间 | _number \| string_ | `200` |
+| on-loadmore | 滚动到底部触发 | _function_ | - |
+| immediate-check | 是否在mounted之后立即检查 | _boolean_ | `true` |
+| load-offset | 当滚动条到底部的距离小于 `load-offset` 时，会发出 `on-loadmore` | _number \| string_ | `50` |
+| finished | 数据是否加载完毕，改变为true，则会显示`finished-text` | _boolean_ | `false` |
+| error | 数据是否加载错误，`on-loadmore`只有在点击错误文本时才会触发，需要`sync`修饰符 | _boolean_ | `false` |
+| loading-text | 滚动到底部正在加载显示文本 | _string_ | `正在加载` |
+| finished-text | 滚动到底部加载完毕的显示文本  | _string_ | `没有更多了` |
+| error-text | 加载错误显示文本 | _string_ | `请求失败，点击重新加载` |
+
+### 方法
+
+使用 ref 获取 List 实例并调用实例方法。
+
+| Name  | Description           |
+| ----- | --------------------- |
+| checkScroll | 检查当前的滚动位置，若已滚动至底部，则会触发 `on-loadmore` |
+
+
+## 例子
+
+查看demo以快速了解如何使用此包。
+
+```bash
+git clone git@github.com:staticdeng/vuejs-loadmore.git
+yarn install
+yarn example:dev
+```
diff --git a/example/src/App.vue b/example/src/App.vue
@@ -37,6 +37,9 @@ export default {
       language: 'Chinese'
     };
   },
+  mounted() {
+    this.fetch();
+  },
   methods: {
     initData() {
       this.list = [];
@@ -70,7 +73,7 @@ export default {
     },
 
     fetch() {
-      for (let i = 0; i < 10; i++) {
+      for (let i = 0; i < 15; i++) {
         this.list.push(this.list.length + 1);
       }
       this.page++;
diff --git a/lib/index.js b/lib/index.js
diff --git a/lib/index.module.js b/lib/index.module.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vuejs-loadmore",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "A pull-down refresh and pull-up loadmore scroll component for Vue.js",
   "entry": "packages/index.js",
   "main": "lib/index.js",
diff --git a/packages/vuejs-loadmore/index.vue b/packages/vuejs-loadmore/index.vue
@@ -21,7 +21,7 @@
 
       <!-- 上拉加载 -->
       <div class="vuejs-loadmore">
-        <div class="vuejs-loadmore-loading" v-if="innerLoading && !finished && !error">
+        <div class="vuejs-loadmore-loading" v-if="loadLoading && !finished && !error">
           <Loading>{{ loadingText }}</Loading>
         </div>
 
@@ -107,7 +107,7 @@ export default {
     onLoadmore: Function,
     immediateCheck: {
       type: Boolean,
-      default: true
+      default: false
     },
     loadOffset: {
       type: [Number, String],
@@ -135,7 +135,7 @@ export default {
       distance: 0, // 下拉距离
       duration: 0, // 动画时间
       scroller: null, // 滚动容器元素
-      innerLoading: false // loadmore loading
+      loadLoading: false // loadmore loading
     };
   },
 
@@ -145,6 +145,7 @@ export default {
     // 获取$el最近一个父级可滚动容器元素
     this.scroller = getScroller(this.$el);
 
+    // 是否立即检查
     if (this.immediateCheck) {
       this.checkSroll();
     }
@@ -166,7 +167,7 @@ export default {
   },
 
   watch: {
-    innerLoading: 'checkSroll',
+    loadLoading: 'checkSroll',
     finished: 'checkSroll'
   },
 
@@ -271,7 +272,7 @@ export default {
 
     checkSroll () {
       this.$nextTick(() => {
-        if (this.innerLoading || !this.onLoadmore || this.finished || this.error) {
+        if (this.loadLoading || !this.onLoadmore || this.finished || this.error) {
           return;
         }
 
@@ -297,20 +298,20 @@ export default {
         const isReachEdge = placeholderRect.bottom - scrollerRect.bottom <= loadOffset;
 
         if (isReachEdge) {
-          this.innerLoading = true;
+          this.loadLoading = true;
           this.timeout(() => this.onLoadmore(this.loadmoreDone), 500);
         }
       });
     },
 
     clickErrorText () {
       this.$emit('update:error', false);
-      this.innerLoading = true;
+      this.loadLoading = true;
       this.timeout(() => this.onLoadmore(this.loadmoreDone), 500);
     },
 
     loadmoreDone () {
-      this.innerLoading = false;
+      this.loadLoading = false;
     }
 
   }

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+# build lib`
	`2`	`+lib`
`1`	`3`	`# Logs`
`2`	`4`	`logs`
`3`	`5`	`*.log`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "vuejs-loadmore",`
`3`		`- "version": "1.0.1",`
	`3`	`+ "version": "1.0.2",`
`4`	`4`	`"description": "A pull-down refresh and pull-up loadmore scroll component for Vue.js",`
`5`	`5`	`"entry": "packages/index.js",`
`6`	`6`	`"main": "lib/index.js",`