-
Notifications
You must be signed in to change notification settings - Fork 0
/
api.html
897 lines (856 loc) · 46.2 KB
/
api.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<title>mescroll -- 精致的下拉刷新和上拉加载js框架</title>
<meta name="Keywords" content="mescroll -- 精致的下拉刷新和上拉加载js框架(JS framework for pull-refresh and pull-up-loading),原生js, 支持vue, 不依赖jquery, zepto, 比 iScroll5, dropload 精简强大">
<meta name="Description" content="mescroll -- 精致的下拉刷新和上拉加载js框架(JS framework for pull-refresh and pull-up-loading). 原生js, 支持vue, 不依赖jquery, zepto, 比iScroll,dropload精简强大; 一套代码多端运行: 完美运行于android,iOS,手机各浏览器,兼容PC端主流浏览器; 参数自由搭配,随心定制,轻松拓展; 主流APP案例,丰富经典">
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="css/api.css">
<style type="text/css">
.nav-float p{font-size: 12px;color: #999;}
</style>
</head>
<body>
<!--标题-->
<div class="ms-header">
<div class="c-view">
<a href="index.html"><img class="logo" src="img/logo.png"/></a>
<div class="nav"> <a href="index.html">首页</a> <a href="demo.html">案例</a> <a class="active">mescroll.js</a> <a href="uni.html">mescroll-uni</a> <a href="qa.html">问答</a> </div>
</div>
</div>
<!--目录-->
<div class="nav-float">
<a href="#begin">快速开始</a>
<a href="#lazyLoad">图片懒加载</a>
<a href="#mescrollvue">mescroll组件<p>( vue组件 )</p></a>
<a href="#options">参数说明</a>
<a href="#methods">常用方法</a>
<a href="#others">其他方法</a>
<a href="./zip/mescroll.js.zip" target="_blank">下载案例</a>
</div>
<!--内容-->
<div class="ms-content">
<div class="c-view">
<p class="page-title">mescroll.js 1.4.2 文档 2019-08-01</p>
<a href="https://github.com/mescroll/mescroll.git" class="git-warp" target="_blank">
<svg class="svg-git" width="25" height="25" aria-hidden="true" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>
<span class="">GitHub</span>
<div class="star-warp">
<svg class="svg-star" width="18" height="18" aria-hidden="true" viewBox="0 0 14 16"><path fill-rule="evenodd" d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74z"></path></svg>
<span>Star</span>
</div>
</a>
<!--QQ群-->
<div style="text-align: center;margin-top: 30px;">
mescroll QQ群: 633126761 ( 答案: mescroll.js交流群 )
</div>
<p class="nav-title">mescroll.js 是在 <span class="green" target="_blank">H5端</span> 运行的下拉刷新和上拉加载插件</p>
<p class="nav-li">您如果是开发 uni-app , 那么请阅读 mescroll 的 <a class="green" href="https://ext.dcloud.net.cn/plugin?id=343" target="_blank">uni版本</a> 文档</p>
<p class="nav-li">强烈推荐使用 uni-app 开发APP, 哪怕开发移动端h5网页, 也建议使用 <a class="green" href="https://ext.dcloud.net.cn/plugin?id=343" target="_blank">uni-app</a></p>
<p class="nav-li">时代变化太快, 作者已转向维护 mescroll 的 <a class="green" href="https://ext.dcloud.net.cn/plugin?id=343" target="_blank">uni 版本</a></p>
<p id="begin" class="nav-title">快速开始 :</p>
<p class="nav-li">1. 下载并引用 <a href="load.html" target="_blank">mescroll.min.css , mescroll.min.js</a></p>
<pre class="nav-code"><code>
<span class="gray">// unpkg的CDN:</span>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/mescroll.min.css">
<script src="https://unpkg.com/[email protected]/mescroll.min.js" charset="utf-8"></script>
<span class="gray">// jsdelivr的CDN:</span>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/mescroll.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/mescroll.min.js" charset="utf-8"></script>
</code></pre>
<p class="nav-li">2. 拷贝以下布局结构 :</p>
<pre class="nav-code"><code>
<div id="mescroll" class="mescroll"> <span class="gray">//id可以改,而"mescroll"的class不能删</span>
<div> <span class="gray">//这个div不能删,否则上拉加载的布局会错位.(可以改成ul或者其他容器标签)</span>
<span class="gray"> //内容...</span>
</div>
</div>
</code></pre>
<p class="nav-li">3. 固定mescroll的div高度. 推荐通过定位的方式,简单快捷: <a href="qa.html#q2">(点此查看其他方法)</a></p>
<pre class="nav-code"><code>
.mescroll{
position: fixed;
top: 44px;
bottom: 0;
height: auto; <span class="gray">/*如设置bottom:50px,则需height:auto才能生效*/</span>
}
</code></pre>
<p class="nav-li">4. 创建mescroll对象 :</p>
<pre class="nav-code"><code>
var mescroll = new MeScroll("mescroll", { <span class="gray">//第一个参数"mescroll"对应上面布局结构div的id (1.3.5版本支持传入dom对象)</span>
<span class="gray">//如果您的下拉刷新是重置列表数据,那么down完全可以不用配置,具体用法参考<a class="blue" href="demo.html" target="_blank">第一个基础案例</a></span>
down: {
callback: downCallback <span class="gray">//下拉刷新的回调,别写成downCallback(),多了括号就自动执行方法了</span>
},
up: {
callback: upCallback, <span class="gray">//上拉加载的回调</span>
<span class="gray">//以下是一些常用的配置,当然不写也可以的.</span>
<span class="gray">page: {</span>
<span class="gray">num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始</span>
<span class="gray">size: 10 //每页数据条数,默认10</span>
<span class="gray">},</span>
<span class="gray" style="display: inline-block;margin-bottom: 6px;">htmlNodata: '<p class="upwarp-nodata">-- END --</p>',</span>
<span class="gray">noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于5才显示无更多数据;</span>
<span class="gray">避免列表数据过少(比如只有一条数据),显示无更多数据会不好看</span>
<b class="gray">这就是为什么无更多数据有时候不显示的原因.</b>
<span class="gray">toTop: {</span>
<span class="gray">//回到顶部按钮</span>
<span class="gray">src: "../img/mescroll-totop.png", //图片路径,默认null,支持网络图</span>
<span class="gray">offset: 1000 //列表滚动1000px才显示回到顶部按钮</span>
<span class="gray">},</span>
<span class="gray">empty: {</span>
<span class="gray">//列表第一页无任何数据时,显示的空提示布局; 需配置warpId才显示</span>
<span class="gray">warpId: "xxid", //父布局的id (1.3.5版本支持传入dom元素)</span>
<span class="gray">icon: "../img/mescroll-empty.png", //图标,默认null,支持网络图</span>
<span class="gray">tip: "暂无相关数据~" //提示</span>
<span class="gray">},</span>
<span class="gray">lazyLoad: {</span>
<span class="gray">use: true // 是否开启懒加载,默认false</span>
<span class="gray">attr: 'imgurl' // 标签中网络图的属性名 : <img imgurl='网络图 src='占位图''/></span>
<span class="gray">}</span>
}
});
</code></pre>
<p class="nav-li">5. 处理回调 :</p>
<pre class="nav-code"><code>
<span class="gray">//下拉刷新的回调</span>
function downCallback() {
<span class="gray">// 处理方式一: 重置mescroll内部变量(如mescroll.num=1和mescroll.hasNext=true), 自动触发upCallback</span>
mescroll.resetUpScroll()
<span class="gray">// 处理方式二: 单独处理下拉刷新的逻辑</span>
<span class="darkgray">$.ajax({</span>
<span class="darkgray">url: 'xxxxxx',</span>
<span class="darkgray">success: function(data) {</span>
<span class="gray">//联网成功的回调,隐藏下拉刷新的状态;</span>
<a href="#methods" class="blue">mescroll.endSuccess();</a> <span class="gray">//无参. </span><span class="blue">注意结束下拉刷新是无参的</span>
<span class="gray">//设置数据</span>
<span class="gray">//setXxxx(data);//自行实现 TODO</span>
<span class="darkgray">},</span>
<span class="darkgray">error: function(data) {</span>
<span class="gray">//联网失败的回调,隐藏下拉刷新的状态</span>
<a href="#methods" class="blue">mescroll.endErr();</a>
<span id="tagUpCallback" class="darkgray">}</span>
<span class="darkgray">});</span>
}
<span class="gray">//上拉加载的回调 page = {num:1, size:10}; num:当前页 默认从1开始, size:每页数据条数,默认10</span>
function upCallback(<a href="#tagPage" class="blue">page</a>) {
var pageNum = page.num; <span class="gray">// 页码, 默认从1开始 <a href="qa.html#q7" class="green">如何修改从0开始 ?</a></span>
var pageSize = page.size; <span class="gray">// 页长, 默认每页10条</span>
<span class="darkgray">$.ajax({</span>
<span class="darkgray">url: 'xxxxxx?num=' + <span class="green">pageNum</span> + "&size=" + <span class="green">pageSize</span>,</span>
<span class="darkgray">success: function(data) {</span>
var curPageData = data.xxx; // 接口返回的当前页数据列表
var totalPage = data.xxx; // 接口返回的总页数 (比如列表有26个数据,每页10条,共3页; 则totalPage值为3)
var totalSize = data.xxx; // 接口返回的总数据量(比如列表有26个数据,每页10条,共3页; 则totalSize值为26)
var hasNext = data.xxx; // 接口返回的是否有下一页 (true/false)
<span class="gray">//联网成功的回调,隐藏下拉刷新和上拉加载的状态;</span>
<span class="gray">//mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空,显示<a href="#tagEmpty" class="blue">empty</a>配置的内容;</span>
<span class="gray">//列表如果无下一页数据,则提示无更多数据,(注意<a href="#tagNoMoreSize" class="blue">noMoreSize</a>的配置)</span>
<span class="gray">//方法一(推荐): 后台接口有返回列表的总页数 totalPage</span>
<span class="gray">//必传参数(当前页的数据个数, 总页数)</span>
//mescroll.endByPage(curPageData.length, totalPage);
<span class="gray">//方法二(推荐): 后台接口有返回列表的总数据量 totalSize</span>
<span class="gray">//必传参数(当前页的数据个数, 总数据量)</span>
//mescroll.endBySize(curPageData.length, totalSize);
<span class="gray">//方法三(推荐): 您有其他方式知道是否有下一页 hasNext</span>
<span class="gray">//必传参数(当前页的数据个数, 是否有下一页true/false)</span>
//mescroll.endSuccess(curPageData.length, hasNext);
<span class="gray">//方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.</span>
<span class="gray">//如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据</span>
<span class="gray">//如果传了hasNext,则翻到第二页即可显示无更多数据.</span>
<span class="gray">//mescroll.endSuccess(curPageData.length);</span>
<span class="blue">//curPageData.length必传的原因:</span>
<span class="blue">1. 使配置的noMoreSize 和 empty生效</span>
<span class="blue">2. 判断是否有下一页的首要依据: </span>
<span class="blue"> 当传的值小于page.size时(说明不满页了),则一定会认为无更多数据;</span>
<span class="blue"> 比传入的totalPage, totalSize, hasNext具有更高的判断优先级;</span>
<span class="blue">3. 当传的值等于page.size时,才会取totalPage, totalSize, hasNext判断是否有下一页</span>
<span class="blue">传totalPage, totalSize, hasNext目的是避免方法四描述的小问题</span>
<span class="gray">// 设置列表数据 自行实现 TODO</span>
<span class="gray">// if(page.num == 1) document.getElementById("xxxxList").innerHTML="" // 第一页,先置空,再追加</span>
<span class="gray">// setListData(curPageData);</span>
<span class="darkgray">},</span>
<span class="darkgray">error: function(e) {</span>
<span class="gray">//联网失败的回调,隐藏下拉刷新和上拉加载的状态</span>
<a href="#methods" class="blue">mescroll.endErr();</a>
<span class="darkgray">}</span>
<span class="darkgray">});</span>
}
</code></pre>
<br />
<p class="nav-li">------ 以上为mescroll最基本的用法,强烈建议您下载并查看 <a href="demo.html#base" target="_blank">mescroll基础案例</a> , 发现mescroll更强大的功能 ~</p>
<p class="nav-li">------ 如使用中有疑问, 请先查看 <a href="qa.html" target="_blank">常见问题专区</a> ~</p>
<p class="nav-li">------ 自定义loading动画推荐: <a href="https://loading.io" target="_blank">https://loading.io</a> 和 <a href="https://icons8.com/preloaders/" target="_blank">https://icons8.com/preloaders/</a></p>
<p id="lazyLoad" class="nav-title">mescroll图片懒加载的使用 ,一分钟入门:</p>
<p class="nav-li">1. 确保mescroll至少到1.4.1版本</p>
<p class="nav-li">2. 初始化mescroll的时候,在up中配置lazyLoad的use为true :</p>
<pre class="nav-code"><code>
<span class="gray">var mescroll = new MeScroll("mescroll", {</span>
up: {
lazyLoad: {
use: true, // 是否开启懒加载,默认false
<span class="gray">attr: 'imgurl', // 网络地址的属性名 (图片加载成功会移除该属性): <img imgurl='网络图 src='占位图''/></span>
<span class="gray">showClass: 'mescroll-lazy-in', // 图片加载成功的显示动画: 渐变显示,参见mescroll.css</span>
<span class="gray">delay: 500, // 列表滚动的过程中每500ms检查一次图片是否在可视区域,如果在可视区域则加载图片</span>
<span class="gray">offset: 200 // 超出可视区域200px的图片仍可触发懒加载,目的是提前加载部分图片</span>
}
}
<span class="gray">})</span>
</code></pre>
<p class="nav-li">3. 设置img或div的 imgurl 属性, 值为图片的网络地址</p>
<pre class="nav-code"><code>
img标签: <img imgurl="网络图" src="占位图"/> <span class="gray">// 占位图直接在src设置; 图片加载成功,就会替换src的占位图</span>
div或其他标签: <div imgurl="网络图" style="background-image: url(占位图)"><div> <span class="gray">// 占位图在css中设置; 图片以背景图的形式展示</span>
</code></pre>
<p class="nav-li">
4. 至此mescroll的懒加载功能已经可以正常使用了,mescroll在列表滚动时会自动加载可视区域内的图片.<br />
另外,有时候您可能会动态添加或修改图片,希望手动触发一下懒加载,<br />
那么只需调用 mescroll.lazyLoad() 或 mescroll.endByPage() 或 mescroll.endBySize() 或 mescroll.endSuccess() 即可.
</p>
<p class="nav-li">5. mescroll的所有案例都开启了懒加载,您可参考体验. <a href="preview.html?name=list-mescroll-lazy" target="_blank">当然这里还有专门介绍懒加载的案例~</a></p>
<p class="nav-title">NPM :</p>
<pre class="nav-code"><code>
npm install --save mescroll.js <span class="gray">//不要使用cnpm安装, 因为更新下来有可能是旧的版本</span>
</code></pre>
<p id="mescrollvue" class="nav-title">在 vue-cli 中 mescroll组件的使用:</p>
<p class="nav-li">1. 执行npm命令安装mescroll : <span class="green">npm install --save mescroll.js</span></p>
<p class="nav-li">2. 引入mescroll组件 : <span class="green">import MescrollVue from 'mescroll.js/mescroll.vue'</span></p>
<p class="nav-li">3. 页面示例代码 :</p>
<pre class="nav-code"><code>
<template>
<div>
<span class="gray"><!--mescroll滚动区域的基本结构--></span>
<mescroll-vue ref="mescroll" :down="mescrollDown" :up="mescrollUp" @init="mescrollInit">
<span class="gray"><!--内容...--></span>
</mescroll-vue>
</div>
</template>
<script>
<span class="gray">// 引入mescroll的vue组件</span>
import MescrollVue from 'mescroll.js/mescroll.vue'
export default {
components: {
MescrollVue <span class="gray">// 注册mescroll组件</span>
},
data () {
return {
mescroll: null, <span class="gray">// mescroll实例对象</span>
mescrollDown:{}, <span class="gray">//下拉刷新的配置. (如果下拉刷新和上拉加载处理的逻辑是一样的,则mescrollDown可不用写了)</span>
mescrollUp: { <span class="gray">// 上拉加载的配置.</span>
callback: this.upCallback, <span class="gray">// 上拉回调,此处简写; 相当于 callback: function(page, mescroll) { }</span>
<span class="gray">//以下是一些常用的配置,当然不写也可以的.</span>
<span class="gray">page: {</span>
<span class="gray">num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始</span>
<span class="gray">size: 10 //每页数据条数,默认10</span>
<span class="gray">},</span>
<span class="gray" style="display: inline-block;margin-bottom: 6px;">htmlNodata: '<p class="upwarp-nodata">-- END --</p>',</span>
<span class="gray">noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于5才显示无更多数据;</span>
<span class="gray">避免列表数据过少(比如只有一条数据),显示无更多数据会不好看</span>
<b class="gray">这就是为什么无更多数据有时候不显示的原因</b>
<span class="gray">toTop: {</span>
<span class="gray">//回到顶部按钮</span>
<span class="gray">src: "./static/mescroll/mescroll-totop.png", //图片路径,默认null,支持网络图</span>
<span class="gray">offset: 1000 //列表滚动1000px才显示回到顶部按钮</span>
<span class="gray">},</span>
<span class="gray">empty: {</span>
<span class="gray">//列表第一页无任何数据时,显示的空提示布局; 需配置warpId才显示</span>
<span class="gray">warpId: "xxid", //父布局的id (1.3.5版本支持传入dom元素)</span>
<span class="gray">icon: "./static/mescroll/mescroll-empty.png", //图标,默认null,支持网络图</span>
<span class="gray">tip: "暂无相关数据~" //提示</span>
<span class="gray">}</span>
<span class="gray"> },</span>
dataList: [] // 列表数据
}
},
beforeRouteEnter (to, from, next) { <span class="gray">// 如果没有配置顶部按钮或isBounce,则beforeRouteEnter不用写</span>
next(vm => {
<span class="gray">// 滚动到原来的列表位置,恢复顶部按钮和isBounce的配置</span>
vm.$refs.mescroll && vm.$refs.mescroll.beforeRouteEnter()
})
},
beforeRouteLeave (to, from, next) { <span class="gray">// 如果没有配置顶部按钮或isBounce,则beforeRouteLeave不用写</span>
<span class="gray">// 记录列表滚动的位置,隐藏顶部按钮和isBounce的配置</span>
this.$refs.mescroll && this.$refs.mescroll.beforeRouteLeave()
next()
},
methods: {
<span class="gray">// mescroll组件初始化的回调,可获取到mescroll对象</span>
mescrollInit (mescroll) {
this.mescroll = mescroll // 如果this.mescroll对象没有使用到,则mescrollInit可以不用配置
},
<span class="gray">// 上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10</span>
upCallback (page, mescroll) {
<span class="gray">// 联网请求</span>
axios.get('xxxxxx', {
params: {
num: page.num, <span class="gray">// 页码</span>
size: page.size <span class="gray">// 每页长度</span>
}
}).then((response) => {
<span class="gray"> // 请求的列表数据</span>
let arr = response.data
<span class="gray">// 如果是第一页需手动置空列表</span>
if (page.num === 1) this.dataList = []
<span class="gray">// 把请求到的数据添加到列表</span>
this.dataList = this.dataList.concat(arr)
<span class="gray">// 数据渲染成功后,隐藏下拉刷新的状态</span>
this.$nextTick(() => {
mescroll.endSuccess(arr.length)
})
}).catch((e) => {
<span class="gray">// 联网失败的回调,隐藏下拉刷新和上拉加载的状态;</span>
mescroll.endErr()
})
}
}
}
</script>
<style scoped>
<span class="gray">/*通过fixed固定mescroll的高度*/</span>
.mescroll {
position: fixed;
top: 44px;
bottom: 0;
height: auto;
}
</style>
</code></pre>
<p class="nav-li">------ tip: 在实际使用时, 建议自行封装mixins, 简化写法 </p>
<p id="options" class="nav-title">参数说明 :</p>
<table class="nav-table" cellspacing="0">
<tr><td class="white" colspan="3">var mescroll = new MeScroll ( id或dom对象 , { <a href="#options">down</a> : { 下拉刷新的配置参数 } , <a href="#tagUp">up</a> : { 上拉加载的配置参数 } } ) ;</td></tr>
<tr><td class="white" colspan="3"><b><a href="#options">down</a> 下拉刷新的配置参数</b></td></tr>
<tr id="tagAuto">
<td class="white">参数名</td>
<td>默认值</td>
<td>说明</td>
</tr>
<tr>
<td>use</td>
<td>true</td>
<td>是否启用下拉刷新<br />如果配置false,则不会初始化下拉刷新的布局</td>
</tr>
<tr>
<td>auto</td>
<td>true</td>
<td>是否在初始化完毕之后自动执行一次下拉刷新的回调 <a href="#tagCallback">callback</a></td>
</tr>
<tr>
<td>autoShowLoading</td>
<td>false</td>
<td>如果设置<a href="#tagAuto">auto</a>=true ( 在初始化完毕之后自动执行下拉刷新的回调 ) ,<br />那么是否显示下拉刷新的进度<br/>需配置down的callback才生效</td>
</tr>
<tr id="tagOffset">
<td>isLock</td>
<td>false</td>
<td>是否锁定下拉刷新<br />如果配置true,则会锁定不可下拉,可通过调用mescroll.lockDownScroll(false)解锁</td>
</tr>
<tr>
<td>isBoth</td>
<td>false</td>
<td>下拉刷新时,如果滑动到列表底部是否可以同时触发上拉加载</td>
</tr>
<tr>
<td>offset</td>
<td>80</td>
<td>在列表顶部,下拉大于80px,松手即可触发下拉刷新的回调</td>
</tr>
<tr>
<td>inOffsetRate (1.4.0新增)</td>
<td>1</td>
<td>在列表顶部,下拉的距离小于offset时,改变下拉区域高度比例;值小于1且越接近0,高度变化越小,表现为越往下越难拉</td>
</tr>
<tr>
<td>outOffsetRate</td>
<td>0.2</td>
<td>在列表顶部,下拉的距离大于offset时,改变下拉区域高度比例;<br />值越接近0,高度变化越小,表现为越往下越难拉</td>
</tr>
<tr>
<td>bottomOffset</td>
<td>20</td>
<td>当手指touchmove位置在距离body底部20px范围内的时候结束上拉刷新,避免Webview嵌套导致touchend事件不执行<br/>这是1.2.1版本新增的配置,请检查最新版~</td>
</tr>
<tr>
<td>minAngle</td>
<td>45</td>
<td>触发下拉最少要偏移的角度(滑动的轨迹与水平线的锐角值),取值区间 [0,90];默认45度,即向下滑动的角度大于45度(方位角为45°~145°及225°~315°)则触发下拉;而小于45度,将不触发下拉,避免与左右滑动的轮播等组件冲突;<br />注意:没有必要配置超出[0,90]区间的值,否则角度限制无效; 因为假设配置60, 生效的方位角就已经是60°到120° 和 240°到300°的范围了;<br />这是1.1.6版本新增的配置,请检查更新最新版~</td>
</tr>
<tr>
<td>hardwareClass</td>
<td>"mescroll-hardware"</td>
<td>硬件加速样式,解决iOS下拉因隐藏进度条而闪屏的问题</td>
</tr>
<tr>
<td>warpClass</td>
<td>"mescroll-downwarp"</td>
<td>下拉刷新的布局容器样式</td>
</tr>
<tr>
<td>mustToTop<br/>1.3.7版本新增</td>
<td>false</td>
<td>是否滚动条必须在顶部,才可以下拉刷新.默认false.<br /> 当您发现下拉刷新会闪白屏时,设置true即可修复</td>
</tr>
<tr>
<td>warpId</td>
<td>null</td>
<td>可配置下拉刷新的布局添加到指定id的div</td>
</tr>
<tr>
<td>resetClass</td>
<td>"mescroll-downwarp-reset"</td>
<td>下拉刷新高度重置的动画</td>
</tr>
<tr>
<td>textInOffset<br/>1.3.7版本新增</td>
<td>'下拉刷新'</td>
<td>下拉的距离在offset范围内的提示文本</td>
</tr>
<tr>
<td>textOutOffset<br/>1.3.7版本新增</td>
<td>'释放更新'</td>
<td>下拉的距离大于offset范围的提示文本</td>
</tr>
<tr>
<td>textLoading<br/>1.3.7版本新增</td>
<td>'加载中 ...'</td>
<td>加载中的提示文本</td>
</tr>
<tr id="tagInOffset">
<td>htmlContent</td>
<td>'<p class="downwarp-progress"></p><br /><p class="downwarp-tip"></p>'</td>
<td>下拉刷新的布局内容</td>
</tr>
<tr>
<td>inited</td>
<td>function ( mescroll, downwarp ) { ... }</td>
<td>下拉刷新初始化完毕的回调 (mescroll实例对象,下拉刷新容器dom对象)</td>
</tr>
<tr>
<td>inOffset</td>
<td>function ( mescroll ) { ... }</td>
<td>下拉的距离进入<a href="#tagOffset">offset</a>范围内那一刻的回调 (mescroll实例对象)</td>
</tr>
<tr>
<td>outOffset</td>
<td>function ( mescroll ) { ... }</td>
<td>下拉的距离大于<a href="#tagOffset">offset</a>那一刻的回调 (mescroll实例对象)</td>
</tr>
<tr id="tagBeforeLoading">
<td>onMoving</td>
<td>function ( mescroll, rate, downHight ) { ... }</td>
<td class="left">下拉过程中的回调,滑动过程一直在执行;<br />rate : 拉区域当前高度与指定距离的比值 ( <a href="#tagInOffset">inOffset</a>: rate<1; outOffset: rate>=1 )<br />downHight : 当前下拉区域的高度</td>
</tr>
<tr id="tagShowLoad">
<td>beforeLoading</td>
<td class="left">function ( mescroll , downwarp ) { <br /> return false; <br />}</td>
<td>准备触发下拉刷新的回调; 如果return true,将不触发<a href="#tagShowLoad">showLoading</a>和<a href="#tagCallback">callback</a> <br />常用来完全自定义下拉刷新, 具体用法参考<a href="demo.html#hight" target="_blank">【淘宝 v6.8.0】</a></td>
</tr>
<tr>
<td>showLoading</td>
<td>function ( mescroll ) { ... }</td>
<td>显示下拉刷新进度的回调</td>
</tr>
<tr id="tagCallback">
<td>afterLoading</td>
<td>function(mescroll) { return 0 }</td>
<td>结束加载中,准备隐藏下拉的回调 <br/>返回结束下拉的延时执行时间,默认0ms<br/>常用于结束下拉之前再显示另外一小段动画,才去隐藏下拉刷新的场景<br /> 具体用法参考<a href="preview.html?name=dot-jump" target="_blank">【dotJump】</a></td>
</tr>
<tr id="tagUp">
<td>callback</td>
<td class="left">function ( mescroll ) { <br /> mescroll.resetUpScroll(); <br />}</td>
<td>下拉刷新的回调; 默认重置上拉加载列表为第一页</td>
</tr>
<tr><td class="white" colspan="3"><b><span class="green">up</span> 上拉加载的配置参数</b></td></tr>
<tr>
<td class="white">参数名</td>
<td>默认值</td>
<td>说明</td>
</tr>
<tr>
<td>use</td>
<td>true</td>
<td>是否启用上拉加载<br />如果配置false,则不会初始化上拉加载的布局</td>
</tr>
<tr>
<td>auto</td>
<td>1.3.1以前版本默认false<br/>1.3.1版本默认true</td>
<td>是否在初始化完毕之后自动执行一次上拉加载的回调</td>
</tr>
<tr>
<td>isLock</td>
<td>false</td>
<td>是否锁定上拉加载<br />如果配置true,则会锁定不可上拉,可通过调用mescroll.lockUpScroll(false)解锁</td>
</tr>
<tr>
<td>isBoth</td>
<td><span id="tagNoMoreSize"></span>false</td>
<td>上拉加载时,如果滑动到列表顶部是否可以同时触发下拉刷新</td>
</tr>
<tr>
<td>isBounce</td>
<td>true</td>
<td>是否允许ios的bounce回弹;默认true,允许回弹 (v 1.3.0新增) <a href="http://www.mescroll.com/qa.html?v=66#q10" target="_blank">必读事项</a></td>
</tr>
<tr>
<td>offset</td>
<td>100</td>
<td>列表滚动到距离底部小于100px,即可触发上拉加载的回调</td>
</tr>
<tr>
<td>noMoreSize</td>
<td>5</td>
<td>如果列表已无数据,可设置列表的总数量要大于5条才显示无更多数据;<br />避免列表数据过少(比如只有一条数据),显示无更多数据会不好看<br /><a>这就是为什么无更多数据 有时候不显示的原因了</a></td>
</tr>
<tr>
<td>toTop</td>
<td class="left">{ <br/>
warpId : null , <br/>
src : null , <br/>
html: null , <br/>
offset : 1000 , <br/>
warpClass : "mescroll-totop" , <br/>
showClass : "mescroll-fade-in" , <br/>
hideClass : "mescroll-fade-out" , <br/>
duration : 300 , <br/>
supportTap : false <br/>
btnClick : null <br/>
}</td>
<td class="left">回到顶部按钮的配置: <br/>
warpId: 父布局的id; 默认添加在body中 (1.3.5版本支持传入dom元素) <br/>
src : 图片路径,必须配置src才会显示回到顶部按钮,不配置不显示 <br/>
html: 标签内容,默认null; 如果同时设置了src,则优先取src (2017/12/10新增) <br/>
offset : 列表滚动1000px显示回到顶部按钮 <br/>
warpClass : 按钮样式<br/>
showClass : 显示样式<br/>
hideClass : 隐藏样式<br/>
duration : 回到顶部的动画时长, 默认300ms<br/>
supportTap: 如果您的运行环境支持tap,则可配置true,可减少点击延时,快速响应事件;默认false,通过onclick添加点击事件; (v 1.3.0 新增) (注:微信和PC无法响应tap事件)<br />
btnClick: 点击按钮的回调; 提示:如果在回调里return true,将不执行回到顶部的操作
</td>
</tr>
<tr>
<td>loadFull</td>
<td class="left">{ <br/>
<span id="tagEmpty"> use : false , <br/></span>
delay : 500 <br/>
}</td>
<td class="left">
use : 列表数据过少,不足以滑动触发上拉加载,是否自动加载下一页,直到满屏或无数据; 默认false,因为可调大<a href="#tagPage">page.size</a>使数据满屏.<br/>
delay : 延时执行的毫秒数; 延时是为了保证列表数据或占位的图片都已初始化完成,且下拉刷新上拉加载中区域动画已执行完毕;
</td>
</tr>
<tr>
<td>empty</td>
<td class="left">{ <br/>
warpId : null , <br/>
icon : null , <br/>
tip : "暂无相关数据~" , <br/>
<span id="tagClearId"> btntext : "" , <br/></span>
btnClick : null <br/>
supportTap : false <br/>
}</td>
<td class="left">列表第一页无任何数据时,显示的空布局 (需配置warpId才生效) <br/>
warpId : 父布局的id (1.3.5版本支持传入dom元素)<br/>
icon : 空布局的图标路径 <br/>
tip : 提示文本 <br/>
btntext : 按钮文本 <br/>
btnClick : 点击按钮的回调 <br/>
supportTap: 如果您的运行环境支持tap,则可配置true,可减少点击延时,快速响应事件;默认false,通过onclick添加点击事件; (v 1.3.0 新增) (注:微信和PC无法响应tap事件)
</td>
</tr>
<tr id="tagClearEmptyId">
<td>clearId</td>
<td>null</td>
<td>加载第一页时需清空数据的列表id<br />如果此项有值,将不使用<a href="#tagClearEmptyId">clearEmptyId</a>的值<br />在vue中使用,不能配置此项</td>
</tr>
<tr>
<td>clearEmptyId</td>
<td>null</td>
<td>相当于同时设置了<a href="#tagClearId">clearId</a>和<a href="#tagEmpty">empty.warpId</a> 简化写法;<br />在vue中使用,不能配置此项</td>
</tr>
<tr>
<td>hardwareClass</td>
<td>"mescroll-hardware"</td>
<td>硬件加速样式,使动画更流畅</td>
</tr>
<tr>
<td>warpId</td>
<td>null</td>
<td>可配置上拉加载的布局添加到指定id的div</td>
</tr>
<tr>
<td>warpClass</td>
<td>"mescroll-upwarp"</td>
<td>上拉加载的布局容器样式</td>
</tr>
<tr id="tagHtmlNodata">
<td>htmlLoading</td>
<td>'<p class="upwarp-progress mescroll-rotate"></p><p class="upwarp-tip">加载中..</p>'</td>
<td>上拉加载中的布局</td>
</tr>
<tr>
<td>htmlNodata</td>
<td>'<p class="upwarp-nodata"><br />-- END --<br /></p>'</td>
<td>无数据的布局</td>
</tr>
<tr>
<td>inited</td>
<td>function ( mescroll , upwarp ) { }</td>
<td>初始化完毕的回调<br />回调(mescroll实例, upwarp上拉加载的布局Dom对象)</td>
</tr>
<tr>
<td>showLoading</td>
<td>function ( mescroll , upwarp ) { ... }</td>
<td>显示上拉加载中的回调<br />回调(mescroll实例, upwarp上拉加载的布局Dom对象)</td>
</tr>
<tr>
<td>showNoMore</td>
<td>function ( mescroll , upwarp ) { ... }</td>
<td>显示无更多数据的回调<br />回调(mescroll实例, upwarp上拉加载的布局Dom对象)</td>
</tr>
<tr>
<td>onScroll</td>
<td>null</td>
<td>列表滑动监听, 默认null<br />例 onScroll : function(mescroll, y, isUp){ ... };<br/>y为列表当前滚动条的位置;<br/>isUp=true向上滑,isUp=false向下滑)<br/>isUp是1.2.1版本新增的配置,请检查最新版~</td>
</tr>
<tr id="tagPage">
<td>callback</td>
<td>function ( page, mescroll ) { }</td>
<td>上拉加载的回调; 回调 ( <a href="#tagPage">page</a>对象, mescroll实例 )</td>
</tr>
<tr>
<td>page</td>
<td class="left">{<br/> num : 0 , <br/> size : 10 , <br/> time : null <br/>}</td>
<td class="left">num : 当前页码,默认0,回调之前加1,即<a href="#tagCallback">callback</a>(page)从1开始; <a href="qa.html#q7">如何修改从0开始 ?</a><br/>size : 每页数据的数量; <br/>time : 加载第一页数据服务器返回的时间 (可空); 防止用户翻页时,后台新增了数据从而导致下一页数据重复;</td>
</tr>
<tr>
<td>scrollbar</td>
<td class="left">{<br/> use : ... , <br/> barClass : "mescroll-bar" <br/>}</td>
<td class="left">use : 是否开启自定义滚动条;<br />PC端默认true开启自定义滚动条; 移动端默认false不使用 <br/><br />barClass : 自定义滚动条的样式;</td>
</tr>
<tr>
<td>lazyLoad</td>
<td class="left">
{<br/>
use: false,<br/>
attr: 'imgurl',<br/>
showClass: 'mescroll-lazy-in',<br/>
delay: 500,<br/>
offset: 200<br/>
}
</td>
<td class="left">
use: 是否开启懒加载,默认false<br/>
attr: 标签中网络图片地址的属性名,默认"imgurl"<br/>
showClass: 显示样式:渐变显示,参见mescroll.css<br/>
delay: 列表滚动的过程中检查一次图片是否在可视区域的时间间隔,默认500 (单位ms)<br/>
offset: 超出可视区域多少px的图片仍可触发懒加载 默认200
</td>
</tr>
</table>
<p id="methods" class="nav-title">常用方法 :</p>
<table class="nav-table" cellspacing="0">
<tr>
<td class="white">方法名</td>
<td>说明</td>
</tr>
<tr>
<td class="left">mescroll.endByPage(dataSize, totalPage, systime);<br/>(v 1.2.1 新增)</td>
<td class="left">隐藏下拉刷新和上拉加载的状态, 在联网获取数据成功后调用<br />
dataSize : 当前页获取的数据总数(注意是当前页)<br />
totalPage : 列表的总页数<br/>
<a href="qa.html#q9">systime : 加载第一页数据的服务器时间 (可空);</a>
</td>
</tr>
<tr>
<td class="left">mescroll.endBySize(dataSize, totalSize, systime);<br/>(v 1.2.1 新增)</td>
<td class="left">隐藏下拉刷新和上拉加载的状态, 在联网获取数据成功后调用<br />
dataSize : 当前页获取的数据总数(注意是当前页)<br />
totalSize : 列表的总数据量<br/>
systime : 加载第一页数据的服务器时间 (可空);
</td>
</tr>
<tr>
<td class="left">mescroll.endSuccess(dataSize, hasNext, systime);<br/>(v 1.2.1 调整)</td>
<td class="left">隐藏下拉刷新和上拉加载的状态, 在联网获取数据成功后调用<br />
dataSize : 当前页获取的数据量(注意是当前页)<br />
hasNext : 是否有下一页数据true/false<br/>
systime : 加载第一页数据的服务器时间 (可空);
</td>
</tr>
<tr>
<td class="left">mescroll.endErr();</td>
<td class="left">隐藏下拉刷新和上拉加载的状态, 在联网获取数据失败后调用;<br />mescroll内部会自动恢复原来的页码,时间等变量;</td>
</tr>
<tr>
<td class="left">mescroll.resetUpScroll( isShowLoading );</td>
<td class="left">重置列表为第一页 (常用于列表筛选条件变化或切换菜单时重新刷新列表数据)<br />内部实现: 把page.num=1,再主动触发up.callback<br />isShowLoading 是否显示进度布局; <br />1.默认null,不传参,则显示上拉加载的进度布局 <br />2.传参true, 则显示下拉刷新的进度布局<br />3.传参false,则不显示上拉和下拉的进度 (常用于静默更新列表数据)</td>
</tr>
<tr>
<td class="left">mescroll.triggerDownScroll();</td>
<td>主动触发下拉刷新</td>
</tr>
<tr>
<td class="left">mescroll.triggerUpScroll();</td>
<td>主动触发上拉加载</td>
</tr>
<tr>
<td class="left">mescroll.setPageNum(num);<br/>(v 1.2.5 新增)</td>
<td>设置当前page.num的值</td>
</tr>
<tr>
<td class="left">mescroll.setPageSize(size);<br/>(v 1.2.5 新增)</td>
<td>设置当前page.size的值</td>
</tr>
<tr>
<td class="left">mescroll.scrollTo( y, t );</td>
<td class="left">滚动列表到指定位置<br />y=0,则回到列表顶部; 如需滚动到列表底部,可设置y很大的值,比如y=99999<br />t时长,单位ms,默认300; 如果不需要动画缓冲效果,则传0 (需更新至1.2.3版本)</td>
</tr>
<tr>
<td class="left">mescroll.optDown;</td>
<td>获取下拉刷新的配置 </td>
</tr>
<tr>
<td class="left">mescroll.optUp;</td>
<td>获取上拉加载的配置 </td>
</tr>
<tr>
<td class="left">mescroll.lockDownScroll( isLock );</td>
<td>锁定下拉刷新 ( isLock=true,null 锁定 ; isLock=false 解锁 )</td>
</tr>
<tr>
<td class="left">mescroll.lockUpScroll( isLock );</td>
<td>锁定上拉加载 ( isLock=true,null 锁定 ; isLock=false 解锁 )</td>
</tr>
<tr>
<td class="left">mescroll.os<br/>(v 1.2.5 新增)</td>
<td>
mescroll.os.ios</b> 为true, 则是ios设备;<br/>
mescroll.os.android</b> 为true, 则是android设备;<br/>
mescroll.os.pc</b> 为true, 则是PC端;
</td>
</tr>
<tr>
<td class="left">mescroll.setBounce(boolean)<br/>(v 1.3.0 新增)</td>
<td>
<b>mescroll.setBounce(true)</b> 允许bounce;<br/>
<b>mescroll.setBounce(false)</b> 禁止bounce
</td>
</tr>
<tr>
<td class="left">mescroll.lazyLoad(delay)<br/>(v 1.3.6 新增)</td>
<td>
主动触发懒加载: 自动加载可视区域的图片.<br />
delay:延时加载图片的时间,默认500ms.目的是确保dom元素已渲染完成.
</td>
</tr>
</table>
<p id="others" class="nav-title">其他方法 :</p>
<table class="nav-table" cellspacing="0">
<tr><td colspan="2" class="white">以下方法不常用,您可灵活运用于更复杂的场景</td></tr>
<tr>
<td class="white">方法名</td>
<td>说明</td>
</tr>
<tr>
<td class="left">mescroll.showDownScroll();</td>
<td>显示下拉刷新的进度布局<br />mescroll.triggerDownScroll() 和 mescroll.resetUpScroll() 内部有调用</td>
</tr>
<tr>
<td class="left">mescroll.endDownScroll();</td>
<td>隐藏下拉刷新的进度布局<br />mescroll.endSuccess() 和 mescroll.endErr() 内部有调用</td>
</tr>
<tr>
<td class="left">mescroll.endUpScroll(isShowNoMore)</td>
<td>结束上拉加载的状态<br />isShowNoMore=true, 显示无更多数据;<br />isShowNoMore=false, 隐藏上拉加载;<br />isShowNoMore=null, 保持当前状态</td>
</tr>
<tr>
<td class="left">mescroll.showUpScroll();</td>
<td>显示上拉加载的进度布局<br />mescroll.triggerDownScroll() 和 mescroll.resetUpScroll() 内部有调用</td>
</tr>
<tr>
<td class="left">mescroll.showNoMore();</td>
<td>显示上拉无更多数据的布局<br />mescroll.endUpScroll() 内部有调用</td>
</tr>
<tr>
<td class="left">mescroll.hideUpScroll(displayAble);</td>
<td>隐藏上拉加载的布局<br/>
mescroll.endUpScroll() 内部有调用<br/>
1.3.5新增参数 displayAble: 是否通过display:none隐藏<br />默认false通过visibility:hidden的方式隐藏
</td>
</tr>
<tr>
<td class="left">mescroll.clearDataList();</td>
<td>清空上拉加载的数据列表<br />mescroll.resetUpScroll() 和 mescroll.endSuccess() 内部有调用</td>
</tr>
<tr>
<td class="left">mescroll.showEmpty();</td>
<td>显示无任何数据的空布局<br />mescroll.endSuccess() 内部有调用</td>
</tr>
<tr>
<td class="left">mescroll.removeEmpty();</td>
<td>移除无任何数据的空布局<br />mescroll.endSuccess() 内部有调用</td>
</tr>
<tr>
<td class="left">mescroll.showTopBtn(time);</td>
<td>显示回到顶部的按钮<br/>time: 显示的动画时长,默认0.5秒 (1.3.5版本新增参数)</td>
</tr>
<tr>
<td class="left">mescroll.hideTopBtn(time);</td>
<td>隐藏回到顶部的按钮 <br/>time: 隐藏的动画时长,默认0.5秒 (1.3.5版本新增参数)</td>
</tr>
<tr>
<td class="left">mescroll.setTopBtnFadeDuration(time);<br/>(1.3.5版本新增)</td>
<td>设置回到顶部按钮的显示和隐藏的动画时长 <br/>time: 显示隐藏动画时长,默认0.5秒</td>
</tr>
<tr>
<td class="left">mescroll.getScrollTop();</td>
<td>获取滚动条的位置y; 也可以在up配置onScroll监听滚动条的位置</td>
</tr>
<tr>
<td class="left">mescroll.getBodyHeight();</td>
<td>获取body的高度 </td>
</tr>
<tr>
<td class="left">mescroll.getClientHeight();</td>
<td>获取滚动容器的高度 </td>
</tr>
<tr>
<td class="left">mescroll.getScrollHeight();</td>
<td>获取滚动内容的高度 </td>
</tr>
<tr>
<td class="left">mescroll.getToBottom();<br/>(v 1.3.0新增)</td>
<td>获取当前滚动条到底部的距离 </td>
</tr>
<tr>
<td class="left">mescroll.getStep(star, end, callback, t, rate);<br/>(v 1.2.8 新增) </td>
<td align="left">
star : 开始值; <br/>
end : 结束值; <br/>
callback(step,timer) : 回调 function(step,timer), <br/>
t : 计步时长; 传0则直接回调end值; 不传则默认300ms ; <br/>
rate : 周期; 不传则默认30ms计步一次 ; <br/>
此方法相当于默认在300ms内,每30ms返回star到end之间的阶梯值step; 可用于模拟帧动画 <br/>
比如mescroll的回到顶部缓冲动画,轮播导航案例的顶部菜单滚动都是通过getStep实现<br/>
(注: 您可根据实际情况在 callback 通过 window.clearInterval(timer) 提前结束计步器)
</td>
</tr>
<tr>
<td class="left">mescroll.version;<br/>(v 1.3.0新增)</td>
<td>mescroll的版本号</td>
</tr>
<tr>
<td class="left">mescroll.destroy();</td>
<td>销毁mescroll</td>
</tr>
</table>
<br /><br /><br /><br /><br />
</div>
</div>
<!--底部-->
<p class="ms-footer">Copyright © 2017-2025 mescroll.com All Rights Reserved <a style="color:gray" href="http://www.beian.miit.gov.cn">粤ICP备17076411号-1</a></p>
</body>
</html>