Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit f67365b

Browse files
处理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>
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>
535 Bytes
Loading[フレーム]

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /