├── LoadMore.vue
├── README.md
├── index.js
└── package.json


/LoadMore.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="loadMore" class="loadmore" @touchstart="touchstart($event)" @touchmove="touchmove($event)" @touchend="touchend($event)">
  3 |     <div class="pull-wrap">
  4 |         <div v-show="openRefresh">
  5 |           <transition name="fade">
  6 |             <div>
  7 |               <i v-if="state==3&&refreshTips"  key="1"  class="loadmore-icon"></i>
  8 |               <i v-else-if="refreshTips" key="2" :class="state==1 ? 'pull-arrow pull-toggle': state==2?'pull-arrow':''"></i>
  9 |               <span v-if="refreshTips" key="3" class="pull-text">{{refreshTips}}</span>
 10 |             </div>
 11 |           </transition>
 12 |         </div>
 13 |     </div>
 14 |     <slot></slot>
 15 |     <div class="loadmore-tip" id="loadTips" v-if="totalCount > 0 && totalCount >= pageSize">
 16 |       <i v-show="loadTips=='正在加载中'" class="loadmore-icon"></i>
 17 |       {{loadTips}}
 18 |     </div>
 19 |   </div>
 20 | </template>
 21 | <script>
 22 | var clr, clr2 ,clr3;
 23 | export default {
 24 |   props: {
 25 |     pageIndex: {
 26 |       type: [Number, String],
 27 |       default: "1"
 28 |     },
 29 |     pageSize: {
 30 |       type: [Number, String],
 31 |       default: "10"
 32 |     },
 33 |     totalCount: {
 34 |       type: [Number, String],
 35 |       default: "0"
 36 |     },
 37 |     tips: {
 38 |       type: [String],
 39 |       default: "暂无数据"
 40 |     },
 41 |     openRefresh: {
 42 |       type: [Boolean],
 43 |       default: false
 44 |     }
 45 |   },
 46 |   data() {
 47 |     return {
 48 |       isPull: false,//是否达到了松开刷新的临界点
 49 |       state: 1,//1:下拉刷新，2：松开刷新，3：更新中
 50 |       refreshTips:'',
 51 |       loadTips: "正在加载中"
 52 |     };
 53 |   },
 54 |   watch: {
 55 |     pageIndex() {
 56 |       this.loadMore();
 57 |     },
 58 |     totalCount:{
 59 |       handler(val, oldval) {
 60 |        if (val > 0) {
 61 |           this.loadMore();
 62 |         }
 63 |       },
 64 |       immediate: true
 65 |     }
 66 |   },
 67 |   methods: {
 68 |     //上滑动加载更多
 69 |     loadMore() {
 70 |       var scope = this;
 71 |       scope.loadTips = "正在加载中";
 72 |       let flag = true;
 73 |       let pageSize = this.pageSize;
 74 |       let pageIndex = this.pageIndex;
 75 |       let totalCount = this.totalCount;
 76 |       // console.log(pageSize,pageIndex,totalCount)
 77 |       return new Promise(function(resolve, reject) {
 78 |         window.onscroll = function() {
 79 |           clr = setTimeout(() => {
 80 |             let scrollHeight =  document.documentElement.scrollHeight || document.body.scrollHeight;
 81 |             let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
 82 |             let clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
 83 |             if (!document.getElementById("loadTips")) {
 84 |               return;
 85 |             }
 86 |             let rectBottom = document.getElementById("loadTips").getBoundingClientRect().bottom | 0;
 87 |             //if (scrollTop + clientHeight >= scrollHeight - 25) {
 88 |             if (rectBottom < clientHeight + 25) {
 89 |               if (flag) {
 90 |                 flag = false;
 91 |                 var size = totalCount - pageIndex * pageSize;
 92 |                 if (size > 0) {
 93 |                   scope.$emit("loadmore", pageIndex + 1);
 94 |                   resolve(true);
 95 |                 } else {
 96 |                   scope.loadTips = "没有更多数据了";
 97 |                   resolve(false);
 98 |                 }
 99 |                 clearTimeout(clr);
100 |               }
101 |             }
102 |           }, 400);
103 |         };
104 |       });
105 |     },
106 |     //下拉刷新
107 |     refresh() {
108 |         this._startPos = 0
109 |         this._transitionHeight = 0
110 |         this.obj = document.getElementById("loadMore")
111 |         this.objTop = this.obj.offsetTop
112 |     },
113 |     touchstart(event){
114 |       if (!this.openRefresh) return
115 |       this._startPos = event.targetTouches[0].screenY
116 |       this.obj.style.transition = "transform 0s linear"
117 |     },
118 |     touchmove(event){
119 |       if (!this.openRefresh) return
120 |       var h = Math.ceil(this.obj.getBoundingClientRect().top)
121 |       this._transitionHeight =((event.targetTouches[0].screenY - this._startPos) * 0.4) | 0
122 |      
123 |       if (h>=this.objTop) {
124 |          if (typeof event.cancelable !== 'boolean' || event.cancelable) {
125 |           event.preventDefault();
126 |         }
127 |         this.obj.style.transform = "translateY(" + this._transitionHeight + "px)"
128 |         if (this._transitionHeight > 0 && this._transitionHeight < 100) {
129 |           this.state = 1
130 |           this.isPull = false
131 |           this.refreshTips = "下拉刷新"
132 |           if (this._transitionHeight > 50) {
133 |             this.state = 2
134 |             this.isPull = true
135 |             this.refreshTips = "松开更新";
136 |           }
137 |         }
138 |       }
139 |     },
140 |     touchend(event){
141 |       if (!this.openRefresh) return
142 |       this.obj.style.cssText = `transition:transform 0.2s cubic-bezier(0,.2,.5,.7);transform:translateY(0);`
143 |       if (this.isPull) {
144 |         var h = Math.ceil(this.obj.getBoundingClientRect().top + 40)
145 |         this._transitionHeight = event.changedTouches[0].screenY - this._startPos;
146 |         if (h>=this.objTop) {
147 |           this.state = 3;
148 |           this.refreshTips = "正在刷新中";
149 |           this.obj.style.transform = "translateY(40px)";
150 |           clr2 = setTimeout(()=> {
151 |             this.obj.style.transform = "translateY(0)";
152 |             clearTimeout(clr2);
153 |           }, 1000);
154 |           clr3 = setTimeout(()=> {
155 |             clearTimeout(clr2);
156 |             this.isPull = false;
157 |             this.$emit("refresh", true);
158 |           }, 1500);
159 |         }
160 |       }else{
161 |         clr2 = setTimeout(()=> {
162 |           this.state = 1;
163 |           clearTimeout(clr2);
164 |         }, 400);
165 |       }
166 |     }
167 |   },
168 |   destroyed() {
169 |     clearTimeout(clr);
170 |     clearTimeout(clr2);
171 |     clearTimeout(clr3);
172 |   },
173 |   mounted() {
174 |     if (this.openRefresh) {
175 |       this.$nextTick(()=>{
176 |         this.refresh()
177 |       })
178 |     }
179 |   }
180 | };
181 | </script>
182 | <style scoped>
183 | .loadmore{
184 |   margin-top:-40px;
185 | }
186 | .fade-enter-active,.fade-leave-active {
187 |     -webkit-transition: all 0.2s ease;
188 |     transition: all 0.2s ease;
189 | }
190 | .fade-enter, .fade-leave-to {
191 |   opacity: 0;
192 | }
193 | .loadmore-tip {
194 |   color: #aaa;
195 |   font-size: 12px;
196 |   text-align: center;
197 |   height: 40px;
198 |   line-height: 40px;
199 | }
200 | .pull-wrap {
201 |   height:40px;
202 |   line-height: 40px;
203 |   text-align: center;
204 |   width:100%;
205 | }
206 | .no-data-tip {
207 |   text-align: center;
208 |   padding-top: 36%;
209 | }
210 | .no-data-tip p {
211 |   font-size: 16px;
212 |   margin: 10px auto;
213 |   color: #aaa;
214 |   padding: 0;
215 | }
216 | .no-data-tip img {
217 |   display: block;
218 |   margin: 0 auto;
219 |   width: auto;
220 |   max-width: 150px;
221 | }
222 | @keyframes rotate-loading {
223 |   0% {
224 |     -webkit-transform: rotate(0);
225 |     transform: rotate(0);
226 |   }
227 |   100% {
228 |     -webkit-transform: rotate(360deg);
229 |     transform: rotate(360deg);
230 |   }
231 | }
232 | @-webkit-keyframes rotate-loading {
233 |   0% {
234 |     -webkit-transform: rotate(0);
235 |     transform: rotate(0);
236 |   }
237 |   100% {
238 |     -webkit-transform: rotate(360deg);
239 |     transform: rotate(360deg);
240 |   }
241 | }
242 | .loadmore-icon {
243 |   vertical-align: -2px;
244 |   width: 12px;
245 |   height: 12px;
246 |   display: inline-block;
247 |   background: url("data:image/png;base64,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")
248 |     no-repeat;
249 |   background-size: 12px 12px;
250 |   -webkit-animation: rotate-loading 0.5s linear forwards infinite;
251 |   animation: rotate-loading 0.5s linear forwards infinite;
252 | }
253 | .pull-text {
254 |   text-align: center;
255 |   color: #aaa;
256 |   height: 40px;
257 |   font-size:12px;
258 |   line-height: 40px;
259 | }
260 | .pull-arrow {
261 |   vertical-align: -6px;
262 |   height: 18px;
263 |   width: 14px;
264 |   display: inline-block;
265 |   background: url("data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE4LjEuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMjAxLjg5NCAyMDEuODk0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyMDEuODk0IDIwMS44OTQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxnPg0KCQk8cG9seWdvbiBzdHlsZT0iZmlsbDojMDEwMDAyOyIgcG9pbnRzPSIzMy43NjgsNjYuMDE5IDM5LjEwOCw3MS4yNjYgOTcuMTcxLDE0LjIwNCA5Ny4xNzEsMjAxLjg5NCAxMDQuNzE5LDIwMS44OTQgDQoJCQkxMDQuNzE5LDE0LjE5NCAxNjIuNzg2LDcxLjI2NiAxNjguMTI1LDY2LjAxOSAxMDAuOTQ3LDAgCQkiLz4NCgk8L2c+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8L3N2Zz4NCg==")
266 |     no-repeat;
267 |   transition: all 0.2s ease;
268 | }
269 | .pull-toggle {
270 |   vertical-align: -2px;
271 |   -webkit-transform: rotate(180deg);
272 |   transform: rotate(180deg);
273 | }
274 | </style>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | [![issues](https://img.shields.io/github/issues/tanagang/vue-loadmore-simple)](https://github.com/tanagang/vue-loadmore-simple/issues)
 2 | [![forks](https://img.shields.io/github/forks/tanagang/vue-loadmore-simple)](https://github.com/tanagang/vue-loadmore-simple)
 3 | [![stars](https://img.shields.io/github/stars/tanagang/vue-loadmore-simple)](https://github.com/tanagang/vue-loadmore-simple)
 4 | [![npm](https://img.shields.io/npm/v/vue-loadmore-simple)](https://www.npmjs.com/package/vue-loadmore-simple)
 5 | [![downloads](https://img.shields.io/npm/dm/vue-loadmore-simple.svg)](https://www.npmjs.com/package/vue-loadmore-simple)
 6 | [![npm bundle size](https://img.shields.io/bundlephobia/minzip/vue-loadmore-simple)](https://www.npmjs.com/package/vue-loadmore-simple)
 7 | ![github last commit](https://img.shields.io/github/last-commit/tanagang/vue-loadmore-simple)
 8 | 
 9 | 
10 | 基于vue开箱即用的全局组件上滑无限滚动加载更多、下拉刷新  
11 | 下图gif可能有卡顿，[图片原地址](https://file.40017.cn/tcyp/tz/refresh2.gif)  
12 | ```diff
13 | + 若适用就来个star吧
14 | ```
15 | 
16 |   ![](https://file.40017.cn/tcyp/tz/refresh2.gif)
17 | 
18 | ### 使用方法
19 | 首先项目中安装：npm install vue-loadmore-simple -S
20 | ```javascript
21 | //main.js
22 | import LoadMore from 'vue-loadmore-simple'
23 | Vue.use(LoadMore)
24 | //template
25 | <template>
26 |     <load-more 
27 |         :pageIndex="pageIndex" 
28 |         :pageSize="pageSize" 
29 |         :totalCount="totalCount" 
30 |         :openRefresh="true"
31 |         @refresh="refresh"
32 |         @loadmore="loadmore">
33 | 
34 |         <div v-for="(item,index) in list" :key="index">
35 |             ...
36 |         </div>
37 |         
38 |     </load-more>
39 | </template>
40 | <script>
41 | export default {
42 |     data() {
43 |         //注意：当含有上图gif中tab切换或者筛选功能时，请初始化this.totalCount=-1;this.pageIndex=1
44 |         return {
45 |             pageIndex: 1,
46 |             pageSize: 10,
47 |             totalCount: 0
48 |         }
49 |     },
50 |     methods:{
51 |         loadmore(pageIndex){
52 |             //上滑加载更多，pageIndex为下一页页码,
53 |             this.pageIndex = pageIndex
54 |             console.log('加载更多中...')
55 |         },
56 |         refresh(){
57 |             console.log('您下拉刷新了')
58 |         }
59 |     },
60 | }
61 | </script>
62 | 
63 | ```
64 | ```diff
65 | - 注意：当含有上图gif中tab切换或者筛选功能时，请初始化this.totalCount=0;this.pageIndex=1 
66 | ```
67 | ### 参数如下
68 |   *  :pageIndex：页码 （必选）
69 |   *  :pageSize：页的大小（必选）
70 |   *  :totalCount：总条数（必选）
71 |   *  :openRefresh：true，默认false，只有开启以后才能启动下拉刷新* 
72 |  
73 | ### 回调函数
74 |   *  @loadmore：下滑到底时的回调，回调中的参数是下一页的页码
75 |   *  @refresh：下拉刷新
76 | 
77 | ***
78 | github链接
79 | [链接名称](https://github.com/tanagag/vue-loadmore-simple)
80 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | import LoadMoreComponent from './LoadMore.vue'
2 | var LoadMore = {
3 | 	install:function(Vue,options){
4 | 		Vue.component('loadMore',LoadMoreComponent)
5 | 	}
6 | }
7 | export default LoadMore
8 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-loadmore-simple",
 3 |   "version": "1.2.7",
 4 |   "description": "基于vue开箱即用的全局组件下滑加载更多无限滚动、下拉刷新，可自定义无数据时的文案和图标（默认含有）",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "https://github.com/tanagag/vue-loadmore-simple"
12 |   },
13 |   "keywords": [
14 |     "vue-loadmore",
15 |     "loadmore",
16 |     "refresh",
17 |     "加载更多",
18 |     "无限滚动",
19 |     "上滑加载更多",
20 |     "下拉刷新"
21 |   ],
22 |   "author": "tanzheng",
23 |   "license": "ISC"
24 | }
25 | 


--------------------------------------------------------------------------------