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
| <template>
| <scroll-view
| :scroll-y="true"
| @scrolltolower="load"
| @scroll="scroll"
| @refresherrefresh="onRefresh"
| :refresher-enabled="refresherEnabled&&scrollTop<50"
| :refresher-triggered="refreshing"
| refresher-background="transparent"
| :refresher-threshold="50"
| >
| <slot></slot>
| <!-- <view v-if="loading" class="fn-center p-y-xs">
| <van-loading size="30rpx">
| {{$t('common.loadMore')}}...
| </van-loading>
| </view>
| <view v-else-if="finished" class="fn-center p-y-xs">
| {{$t('common.notMore')}}
| </view> -->
| </scroll-view>
| </template>
| <script>
| export default {
| name: "vScroll",
| props: {
| offset: {
| default: 300,
| required: false
| },
| refresherEnabled:{
| default:true,
| required:false,
| type:Boolean
| }
| },
| data() {
| return {
| loading: false,
| refreshing: false,
| finished: false,
| scrollTop:0
| };
| },
| methods: {
| scroll(event){
| this.scrollTop = event.detail.scrollTop
| },
| onRefresh($ev) {
| // 触发刷新并暴露结束函数
| if(this.refreshing) return;
| this.refreshing = true;
| this.$emit("ref", callObj => {
| this.refreshing = false;
| if(!callObj) return;
| if (this.isBoolean(callObj.finished)) {
| this.finished = callObj.finished;
| }else{
| this.finished = true
| }
| });
| },
| isBoolean(ev) {
| return typeof ev == "boolean";
| },
| load() {
| // 触发加载并暴露结束函数
| if(this.loading||this.finished) return;
| this.loading = true;
| this.$emit("load", callObj => {
| this.loading = false;
| if(!callObj) return;
| if (this.isBoolean(callObj.finished)) {
| this.finished = callObj.finished;
| }else if (this.isBoolean(callObj.error)) {
| this.finished = callObj.error;
| }
| });
| }
| },
| mounted() {
| this.load()
| },
| };
| </script>
|
|
