Skip to content

Commit f67365b

Browse files
CoderMikeHeCoderMikeHe
committed
处理loadmore
1 parent 0f728ab commit f67365b

File tree

6 files changed

+156
-91
lines changed

6 files changed

+156
-91
lines changed

‎src/assets/css/vendor.css

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,3 +16,14 @@
1616
padding: 0 24px 20px;
1717
min-height: 20px;
1818
}
19+
20+
/* 这个文件主要是修改AUI提供的默认样式，FBI Warning ！！！ 只准修改全局AUI的样式，不然就滚😡 */
21+
22+
/* 让下拉刷新的三个小点居中 */
23+
.mint-loadmore-top .ptr-instructions .inside {
24+
margin-top: 12px;
25+
}
26+
/* 让下拉刷新的时间不要显示 */
27+
.mint-loadmore-top .ptr-instructions .time {
28+
display: none;
29+
}

‎src/components/loadmore/LoadingHeader.vue

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
1-
21
<template>
3-
<div class="ptr-instructions outside">
2+
<div class="ptr-instructions outside">
43
<div v-show="showIcon">
54
<div class="inside">
6-
<div class="block_1" :class="{'animate1':iconRun}"></div>
7-
<div class="block_2" :class="{'animate2':iconRun}"></div>
8-
<div class="block_3" :class="{'animate3':iconRun}"></div>
5+
<div class="block_1" :class="{ animate1: iconRun }"></div>
6+
<div class="block_2" :class="{ animate2: iconRun }"></div>
7+
<div class="block_3" :class="{ animate3: iconRun }"></div>
98
</div>
109
<div v-show="showTime" class="time">更新时间：{{ timeContent }}</div>
1110
</div>
@@ -33,9 +32,9 @@ export default {
3332
}
3433
},
3534
data() {
36-
return {}
35+
return {};
3736
}
38-
}
37+
};
3938
</script>
4039
<style lang="scss" scoped>
4140
.ptr-instructions {
@@ -249,4 +248,3 @@ export default {
249248
}
250249
}
251250
</style>
252-

‎src/components/loadmore/Loadmore.vue

Lines changed: 93 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,29 @@
11
<template>
2-
<div class="mt-loadmore">
2+
<div class="mt-loadmore" ref="scroller">
33
<div
4-
class="mint-loadmore-content"
4+
class="wc-loadmore-content"
55
:class="{ 'is-dropped': topDropped || bottomDropped }"
66
:style="{ transform: transform }"
77
>
8-
<slot name="top">
8+
<slot name="header">
99
<div class="mint-loadmore-top" v-if="topMethod">
10-
<!-- <span class="weui-loading" v-if="topStatus === 'loading'" ></span>
11-
<span class="mint-loadmore-text">{{ topText }}</span> -->
1210
<Header :icon-run="iconRun"></Header>
1311
</div>
1412
</slot>
1513
<slot></slot>
16-
<slot name="bottom">
17-
<div class="mint-loadmore-bottom" v-if="bottomMethod">
18-
<span class="weui-loading" v-if="bottomStatus === 'loading'"></span>
19-
<span class="mint-loadmore-text">{{ bottomText }}</span>
20-
</div>
21-
</slot>
2214
</div>
15+
<!-- footer -->
16+
<slot name="footer">
17+
<div
18+
class="mint-loadmore-bottom"
19+
v-if="bottomMethod"
20+
:style="footerStyle"
21+
>
22+
<i class="weui-loading" v-if="bottomStatus === 'loading'"></i>
23+
<i class="wc-loadmore-arrow" :style="arrowStyle" v-else></i>
24+
<span class="mint-loadmore-text">{{ bottomText }}</span>
25+
</div>
26+
</slot>
2327
</div>
2428
</template>
2529

@@ -113,6 +117,23 @@ export default {
113117
return this.translate === 0
114118
? null
115119
: "translate3d(0, " + this.translate + "px, 0)";
120+
},
121+
122+
// 箭头旋转
123+
arrowStyle() {
124+
if (this.bottomStatus === "drop") {
125+
let transform = "rotate(180deg)";
126+
return {
127+
transform
128+
};
129+
}
130+
return null;
131+
},
132+
// footerStyle
133+
footerStyle() {
134+
return {
135+
bottom: this.translate === 0 ? "-50px" : -1 * this.translate + "px"
136+
};
116137
}
117138
},
118139
@@ -174,22 +195,23 @@ export default {
174195
},
175196
176197
getScrollEventTarget(element) {
177-
let currentNode = element;
178-
while (
179-
currentNode &&
180-
currentNode.tagName !== "HTML" &&
181-
currentNode.tagName !== "BODY" &&
182-
currentNode.nodeType === 1
183-
) {
184-
let overflowY = document.defaultView.getComputedStyle(currentNode)
185-
.overflowY;
186-
if (overflowY === "scroll" || overflowY === "auto") {
187-
console.log("currentNode is", currentNode);
188-
return currentNode;
189-
}
190-
currentNode = currentNode.parentNode;
191-
}
192-
return window;
198+
return this.$refs.scroller;
199+
// let currentNode = element;
200+
// while (
201+
// currentNode &&
202+
// currentNode.tagName !== "HTML" &&
203+
// currentNode.tagName !== "BODY" &&
204+
// currentNode.nodeType === 1
205+
// ) {
206+
// let overflowY = document.defaultView.getComputedStyle(currentNode)
207+
// .overflowY;
208+
// if (overflowY === "scroll" || overflowY === "auto") {
209+
// console.log("currentNode is", currentNode);
210+
// return currentNode;
211+
// }
212+
// currentNode = currentNode.parentNode;
213+
// }
214+
// return window;
193215
},
194216
195217
getScrollTop(element) {
@@ -254,11 +276,23 @@ export default {
254276
document.body.scrollHeight
255277
);
256278
} else {
257-
return (
279+
let a =
258280
parseInt(this.$el.getBoundingClientRect().bottom, 10) <=
259281
parseInt(this.scrollEventTarget.getBoundingClientRect().bottom, 10) +
260-
1
282+
1;
283+
console.log("object");
284+
console.log(parseInt(this.$el.getBoundingClientRect().bottom, 10));
285+
console.log(
286+
parseInt(this.scrollEventTarget.getBoundingClientRect().bottom, 10)
261287
);
288+
let scrollEventTarget = this.scrollEventTarget;
289+
let c = scrollEventTarget.scrollTop + scrollEventTarget.clientHeight;
290+
let b = scrollEventTarget.scrollHeight;
291+
console.log("----");
292+
console.log(c);
293+
console.log(b);
294+
console.log("checkBottomReached is", a);
295+
return c >= b;
262296
}
263297
},
264298
@@ -286,6 +320,8 @@ export default {
286320
this.currentY = event.touches[0].clientY;
287321
let distance = (this.currentY - this.startY) / this.distanceIndex;
288322
this.direction = distance > 0 ? "down" : "up";
323+
console.log(this.startScrollTop);
324+
console.log(distance);
289325
if (
290326
typeof this.topMethod === "function" &&
291327
this.direction === "down" &&
@@ -339,6 +375,7 @@ export default {
339375
this.bottomStatus =
340376
-this.translate >= this.bottomDistance ? "drop" : "pull";
341377
}
378+
console.log(this.translate);
342379
this.$emit("translate-change", this.translate);
343380
},
344381
@@ -383,19 +420,12 @@ export default {
383420
</script>
384421

385422
<style lang="scss" scoped>
386-
/* 这个文件主要是修改AUI提供的默认样式，FBI Warning ！！！ 只准修改全局AUI的样式，不然就滚😡 */
387-
388-
/* 让下拉刷新的三个小点居中 */
389-
.mint-loadmore-top .ptr-instructions .inside {
390-
margin-top: 12px;
391-
}
392-
/* 让下拉刷新的时间不要显示 */
393-
.mint-loadmore-top .ptr-instructions .time {
394-
display: none;
395-
}
396423
.mt-loadmore {
397-
overflow: hidden;
398-
.mint-loadmore-content {
424+
overflow: scroll;
425+
position: relative;
426+
height: 100%;
427+
.wc-loadmore-content {
428+
position: static !important;
399429
.is-dropped {
400430
transition: 0.2s;
401431
}
@@ -406,14 +436,35 @@ export default {
406436
text-align: center;
407437
height: 50px;
408438
line-height: 50px;
439+
color: #999;
409440
}
410441
411442
.mint-loadmore-top {
412443
margin-top: -50px;
413444
}
414445
446+
// .mint-loadmore-bottom {
447+
// margin-bottom: -50px;
448+
// }
415449
.mint-loadmore-bottom {
416-
margin-bottom: -50px;
450+
position: absolute;
451+
width: 100%;
452+
bottom: -50px;
453+
}
454+
455+
.weui-loading,
456+
.wc-loadmore-arrow {
457+
margin-right: 10px;
458+
}
459+
460+
.wc-loadmore-arrow {
461+
background-image: url("./loadmore_up_arrow.png");
462+
background-repeat: no-repeat;
463+
background-size: 100%;
464+
width: 20px;
465+
height: 20px;
466+
display: inline-block;
467+
vertical-align: middle;
417468
}
418469
}
419470
</style>

‎src/components/loadmore/LoadmoreTest.vue

Lines changed: 30 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,13 @@
11
<template>
22
<div class="loadmore__wrapper">
3-
<Loadmore ref="loadmore" :top-method="refreshBoqList"
4-
@translate-change="translateChange"
5-
:bottom-method="loadMoreData"
6-
:bottom-all-loaded="allLoaded">
7-
<h1>123</h1>
8-
<h1>123</h1>
9-
<h1>123</h1>
10-
<h1>123</h1>
11-
<h1>123</h1>
12-
<h1>123</h1>
13-
<h1>123</h1>
14-
<h1>123</h1>
15-
<h1>123</h1>
16-
<h1>123</h1>
17-
<h1>123</h1>
18-
<h1>123</h1>
19-
<h1>123</h1>
20-
<h1>123</h1>
3+
<Loadmore
4+
ref="loadmore"
5+
:top-method="refreshBoqList"
6+
@translate-change="translateChange"
7+
:bottom-method="loadMoreData"
8+
:bottom-all-loaded="allLoaded"
9+
>
10+
<h1>000</h1>
2111
<h1>123</h1>
2212
<h1>123</h1>
2313
<h1>123</h1>
@@ -33,46 +23,49 @@
3323
<h1>123</h1>
3424
<h1>123</h1>
3525
<h1>123</h1>
26+
<h1>456</h1>
3627
</Loadmore>
3728
</div>
3829
</template>
3930

4031
<script>
41-
import Loadmore from '../../../common/components/loadmore/Loadmore';
32+
import Loadmore from "./Loadmore";
4233
export default {
4334
components: {
4435
Loadmore
4536
},
4637
data() {
4738
return {
4839
allLoaded: false
49-
}
40+
};
5041
},
5142
methods: {
52-
refreshBoqList(){
43+
refreshBoqList() {
5344
setTimeout(() => {
54-
this.$refs.loadmore.onTopLoaded()
55-
}, 2000);
45+
this.$refs.loadmore.onTopLoaded();
46+
}, 20000);
5647
},
57-
translateChange(val){
58-
console.log('偏移...',val);
48+
translateChange(val) {
49+
// console.log("偏移...", val);
5950
},
6051
61-
loadMoreData(){
62-
63-
},
64-
65-
},
66-
}
52+
loadMoreData() {
53+
setTimeout(() => {
54+
this.$refs.loadmore.onBottomLoaded();
55+
}, 20000);
56+
}
57+
}
58+
};
6759
</script>
6860

6961
<style lang="scss">
70-
.loadmore__wrapper{
62+
.loadmore__wrapper {
7163
height: 100%;
7264
overflow: scroll;
7365
}
74-
h1 {
75-
height: 44px;
76-
line-height: 44px;
77-
}
78-
</style>
66+
h1 {
67+
height: 44px;
68+
line-height: 44px;
69+
background-color: white;
70+
}
71+
</style>

‎src/components/loadmore/loadmore_up_arrow.png

535 Bytes
Loading

0 commit comments

Comments
 (0)