3f535f30
 杨鑫
'初始'
|
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
|
}).bind(null, __webpack_require__)).catch(__webpack_require__.oe);
};
var _default = {
mixins: [_mixins.default],
components: {
MescrollEmpty: MescrollEmpty,
MescrollTop: MescrollTop
},
data: function data() {
return {
mescroll: {
optDown: {},
optUp: {}
},
// mescroll实例
downHight: 0,
//下拉刷新: 容器高度
downRate: 0,
// 下拉比率(inOffset: rate<1; outOffset: rate>=1)
downLoadType: 0,
// 下拉刷新状态: 0(loading前), 1(inOffset), 2(outOffset), 3(showLoading), 4(endDownScroll)
upLoadType: 0,
// 上拉加载状态：0（loading前），1（loading中），2（没有更多了,显示END文本提示），3（没有更多了,不显示END文本提示）
isShowEmpty: false,
// 是否显示空布局
isShowToTop: false,
// 是否显示回到顶部按钮
windowHeight: 0,
// 可使用窗口的高度
windowBottom: 0,
// 可使用窗口的底部位置
statusBarHeight: 0 // 状态栏高度
};
},
props: {
down: Object,
// 下拉刷新的参数配置
up: Object,
// 上拉加载的参数配置
top: [String, Number],
// 下拉布局往下的偏移量 (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx, 百分比则相对于windowHeight)
topbar: [Boolean, String],
// top的偏移量是否加上状态栏高度, 默认false (使用场景:取消原生导航栏时,配置此项可留出状态栏的占位, 支持传入字符串背景,如色值,背景图,渐变)
bottom: [String, Number],
// 上拉布局往上的偏移量 (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx, 百分比则相对于windowHeight)
safearea: Boolean,
// bottom的偏移量是否加上底部安全区的距离, 默认false (需要适配iPhoneX时使用)
height: [String, Number],
// 指定mescroll最小高度,默认windowHeight,使列表不满屏仍可下拉
bottombar: {
// 底部是否偏移TabBar的高度(默认仅在H5端的tab页生效)
type: Boolean,
default: true
},
sticky: Boolean // 是否支持sticky,默认false; 当值配置true时,需避免在mescroll-body标签前面加非定位的元素,否则下拉区域无法会隐藏
},
mounted: function mounted() {
console.log(22212);
},
computed: {
// mescroll最小高度,默认windowHeight,使列表不满屏仍可下拉
minHeight: function minHeight() {
return this.toPx(this.height || '100%') + 'px';
},
// 下拉布局往下偏移的距离 (px)
numTop: function numTop() {
return this.toPx(this.top);
},
padTop: function padTop() {
return this.numTop + 'px';
},
// 上拉布局往上偏移 (px)
numBottom: function numBottom() {
return this.toPx(this.bottom);
},
padBottom: function padBottom() {
return this.numBottom + 'px';
},
// 是否为重置下拉的状态
isDownReset: function isDownReset() {
return this.downLoadType === 3 || this.downLoadType === 4;
},
// 过渡
transition: function transition() {
return this.isDownReset ? 'transform 300ms' : '';
},
translateY: function translateY() {
return this.downHight > 0 ? 'translateY(' + this.downHight + 'px)' : ''; // transform会使fixed失效,需注意把fixed元素写在mescroll之外
},
// 是否在加载中
isDownLoading: function isDownLoading() {
return this.downLoadType === 3;
},
// 旋转的角度
downRotate: function downRotate() {
return 'rotate(' + 360 * this.downRate + 'deg)';
},
// 文本提示
downText: function downText() {
if (!this.mescroll) return ""; // 避免头条小程序初始化时报错
switch (this.downLoadType) {
case 1:
return this.mescroll.optDown.textInOffset;
case 2:
return this.mescroll.optDown.textOutOffset;
case 3:
return this.mescroll.optDown.textLoading;
case 4:
return this.mescroll.isDownEndSuccess ? this.mescroll.optDown.textSuccess : this.mescroll.isDownEndSuccess == false ? this.mescroll.optDown.textErr : this.mescroll.optDown.textInOffset;
default:
return this.mescroll.optDown.textInOffset;
}
}
},
methods: {
//number,rpx,upx,px,% --> px的数值
toPx: function toPx(num) {
if (typeof num === 'string') {
if (num.indexOf('px') !== -1) {
if (num.indexOf('rpx') !== -1) {
// "10rpx"
num = num.replace('rpx', '');
} else if (num.indexOf('upx') !== -1) {
// "10upx"
num = num.replace('upx', '');
} else {
// "10px"
return Number(num.replace('px', ''));
}
} else if (num.indexOf('%') !== -1) {
// 传百分比,则相对于windowHeight,传"10%"则等于windowHeight的10%
var rate = Number(num.replace('%', '')) / 100;
return this.windowHeight * rate;
}
}
return num ? uni.upx2px(Number(num)) : 0;
},
// 点击空布局的按钮回调
emptyClick: function emptyClick() {
this.$emit('emptyclick', this.mescroll);
},
// 点击回到顶部的按钮回调
toTopClick: function toTopClick() {
this.mescroll.scrollTo(0, this.mescroll.optUp.toTop.duration); // 执行回到顶部
this.$emit('topclick', this.mescroll); // 派发点击回到顶部按钮的回调
}
},
// 使用created初始化mescroll对象; 如果用mounted部分css样式编译到H5会失效
created: function created() {
var vm = this;
var diyOption = {
// 下拉刷新的配置
down: {
inOffset: function inOffset() {
vm.downLoadType = 1; // 下拉的距离进入offset范围内那一刻的回调 (自定义mescroll组件时,此行不可删)
},
outOffset: function outOffset() {
vm.downLoadType = 2; // 下拉的距离大于offset那一刻的回调 (自定义mescroll组件时,此行不可删)
},
onMoving: function onMoving(mescroll, rate, downHight) {
// 下拉过程中的回调,滑动过程一直在执行;
vm.downHight = downHight; // 设置下拉区域的高度 (自定义mescroll组件时,此行不可删)
vm.downRate = rate; //下拉比率 (inOffset: rate<1; outOffset: rate>=1)
},
showLoading: function showLoading(mescroll, downHight) {
vm.downLoadType = 3; // 显示下拉刷新进度的回调 (自定义mescroll组件时,此行不可删)
vm.downHight = downHight; // 设置下拉区域的高度 (自定义mescroll组件时,此行不可删)
},
beforeEndDownScroll: function beforeEndDownScroll(mescroll) {
vm.downLoadType = 4;
return mescroll.optDown.beforeEndDelay; // 延时结束的时长
},
endDownScroll: function endDownScroll() {
vm.downLoadType = 4; // 结束下拉 (自定义mescroll组件时,此行不可删)
vm.downHight = 0; // 设置下拉区域的高度 (自定义mescroll组件时,此行不可删)
if (vm.downResetTimer) {
clearTimeout(vm.downResetTimer);
vm.downResetTimer = null;
} // 移除重置倒计时
vm.downResetTimer = setTimeout(function () {
// 过渡动画执行完毕后,需重置为0的状态,避免下次inOffset不及时显示textInOffset
if (vm.downLoadType === 4) vm.downLoadType = 0;
}, 300);
},
// 派发下拉刷新的回调
callback: function callback(mescroll) {
vm.$emit('down', mescroll);
}
},
// 上拉加载的配置
up: {
// 显示加载中的回调
showLoading: function showLoading() {
vm.upLoadType = 1;
},
// 显示无更多数据的回调
showNoMore: function showNoMore() {
vm.upLoadType = 2;
},
// 隐藏上拉加载的回调
hideUpScroll: function hideUpScroll(mescroll) {
vm.upLoadType = mescroll.optUp.hasNext ? 0 : 3;
},
// 空布局
empty: {
onShow: function onShow(isShow) {
// 显示隐藏的回调
vm.isShowEmpty = isShow;
}
},
// 回到顶部
toTop: {
onShow: function onShow(isShow) {
// 显示隐藏的回调
vm.isShowToTop = isShow;
}
},
// 派发上拉加载的回调
callback: function callback(mescroll) {
vm.$emit('up', mescroll);
}
}
};
_mescrollUni.default.extend(diyOption, _mescrollUniOption.default); // 混入全局的配置
var myOption = JSON.parse(JSON.stringify({
down: vm.down,
up: vm.up
})); // 深拷贝,避免对props的影响
_mescrollUni.default.extend(myOption, diyOption); // 混入具体界面的配置
// 初始化MeScroll对象
vm.mescroll = new _mescrollUni.default(myOption, true); // 传入true,标记body为滚动区域
// init回调mescroll对象
vm.$emit('init', vm.mescroll);
// 设置高度
var sys = uni.getSystemInfoSync();
if (sys.windowHeight) vm.windowHeight = sys.windowHeight;
if (sys.windowBottom) vm.windowBottom = sys.windowBottom;
if (sys.statusBarHeight) vm.statusBarHeight = sys.statusBarHeight;
// 使down的bottomOffset生效
vm.mescroll.setBodyHeight(sys.windowHeight);
// 因为使用的是page的scroll,这里需自定义scrollTo
vm.mescroll.resetScrollTo(function (y, t) {
if (typeof y === 'string') {
// 滚动到指定view (y为css选择器)
setTimeout(function () {
// 延时确保view已渲染; 不使用$nextTick
var selector;
if (y.indexOf('#') == -1 && y.indexOf('.') == -1) {
selector = '#' + y; // 不带#和. 则默认为id选择器
} else {
selector = y;
}
uni.createSelectorQuery().select(selector).boundingClientRect(function (rect) {
if (rect) {
var top = rect.top;
top += vm.mescroll.getScrollTop();
uni.pageScrollTo({
scrollTop: top,
duration: t
});
} else {
console.error(selector + ' does not exist');
}
}).exec();
}, 30);
} else {
// 滚动到指定位置 (y必须为数字)
uni.pageScrollTo({
scrollTop: y,
duration: t
});
}
});
// 具体的界面如果不配置up.toTop.safearea,则取本vue的safearea值
if (vm.up && vm.up.toTop && vm.up.toTop.safearea != null) {} else {
vm.mescroll.optUp.toTop.safearea = vm.safearea;
}
}
};
exports.default = _default;
/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! ./node_modules/@dcloudio/uni-mp-weixin/dist/index.js */ 2)["default"]))
/***/ }),
|
