vue 实现上拉加载下拉刷新（思路贼清晰）_div 下拉刷新下拉加载

作者：知新_RL | 2024-08-21 00:18:22

踩

div 下拉刷新下拉加载

2018年05月08日 17:13:21

阅读数：1565

项目需要用到上拉刷新下拉加载所以自己手动实现了一个
组件：


<template>
    <div class="my-scroll" ref="myScroll" @touchstart="touchStart($event)" @touchmove="touchMove($event)" @touchend="touchEnd($event)">
        <div class="scroll-top" :style="{height:top+'px'}">
            <div v-if="aspect==2">
                <p v-if="state==6">
                    下拉刷新
                </p>
                <p v-if="state==1">
                    <i><img :src="Load"/></i>
                    <br/>
                    刷新中
                </p>
                <p v-if="state==2">松开刷新</p>
                <p v-if="state==3">
                    <i><img :src="Load"/></i>
                    <br/>
                    刷新完成
                </p>
            </div>
        </div>
        <!-- top -->
        <div class="scroll-list" :style="{ transform: 'translate3d(0, ' + top + 'px, 0)'}">
            <slot name='scrollList'></slot>
            <div class="scroll-bottom">
                <div v-if="state==4">加载中</div>
                <div v-if="state==5">加载完成</div>
                <div v-if="state==7">没有更多</div>
            </div>
        </div>
    </div>
</template>
<script type="text/javascript">
import Load from '../assets/Load.gif'
    export default {
        name:'myScroll',
        props:{
            'page':{
                type:Object,  //counter:当前页  pageStart:开始页数  pageEnd:结束页数  total:总页数
                require:true,
            },
            'onRefresh':{ //刷新回调
                type:Function,
                require:true
            },
            'onPull':{ //加载回调
                type:Function,
                require:true
            },
            'getScrollTop':{ //获取滚动条位置
                type:Function
            },
            'setScrollPage':{ //改变滚动条位置
                type:Function
            },
        },
        data(){
            return {
                Load,
                pageX:0,
                pageY:0,
                state:0, 
                scrollPosition:0,
                myScroll:null,
                myScrollList:null,
                top:0,
                aspect:0, //1:向下 2:向上
                listHeight:0,
            }
        },
        created(){
            this.$root.$on('setState', (index) => { //修改状态
                this.state = index
                if(index == 5||index == 3){
                    setTimeout(()=>{
                        this.state = 0
                        this.top = 0
                    },300)
                }
            })
            this.$root.$on('ScrollTop',(top)=>{ //修改滚动条位置
                this.myScroll.scrollTop = top
            })
        },
        methods:{
            touchStart(e){ //触摸事件
                this.pageX = e.targetTouches[0].pageX
                this.pageY = e.targetTouches[0].pageY
            },
            touchMove(e){ //触摸滑动事件
                this.scrollPosition = this.myScroll.scrollTop //获取滚动条位置
                if(e.targetTouches[0].pageY>this.pageY){ //向上滑动
                    this.aspect = 2
                    if(this.myScroll.scrollTop==0){
                        let diff = e.targetTouches[0].pageY - this.pageY - this.scrollPosition
                        this.top = Math.pow(diff, 0.9)
                        let ranget = diff/document.body.clientHeight*100 //计算在屏幕上滑动了多少
                        if(ranget > 20){
                            this.state = 2
                        }else if(ranget < 15){
                            this.state = 6
                        }
                        e.preventDefault()
                    }
                }else if(this.state!=4){ //向上滑动
                    this.aspect = 1
                }
 
            },
            touchEnd(e){
                if(this.aspect == 2&&this.state == 2||this.state == 1){ //上拉处理
                    this.top = 100
                    this.state = 1
                    this.topCallback()
                }else if(this.aspect == 2){
                    this.state = 0
                    this.top = 0
                }
            },
            topCallback(){ //刷新回调
                this.onRefresh(this.state)
            },
            bottomCallback(){ //加载回调
                this.state = 4
                this.onPull(this.state)
            }
        },
        mounted(){
            this.myScroll = this.$refs.myScroll //获取滑条dom
            this.myScrollList = this.myScroll.children[1] //获取列表dom
 
            this.myScroll.addEventListener('scroll',(e)=>{ //监听滚动条事件
                let listHeight = this.myScrollList.offsetHeight //列表总高度
                let listScrollTop = e.target.scrollTop + this.myScroll.offsetHeight //当前滚动条位置
 
                if(this.state == 0&&listHeight-listScrollTop < 100){
                    this.bottomCallback()
                }
 
                if(this.getScrollTop)this.getScrollTop(e.target.scrollTop) //返回X，Y
 
            })
        }
    }
</script>
<style lang="scss" scoped>
    .my-scroll{
        color: #fff;
        max-width: 100%;
        max-height: 100%;
        height: 100%;
        overflow:hidden;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        will-change: transform;
        transition: all 450ms;
        backface-visibility: hidden;
        perspective: 1000;
        position: relative;
        .scroll-top{
            text-align: center;
            display:flex;
            position:absolute;
            top:0;
            left:0;
            width:100%;
            div{
                display:flex;
                height:auto;
                width:100%;
                justify-content: center;
                align-items:center;
                flex-wrap: wrap;
                i{
                    flex:1 0 100%;
                    display:block;
                    height: 0.4rem;
                }
                img{
                    width:0.8rem;
                }
                p{
                    flex:1 0 100%;
                }
            }
        }
        .scroll-list{
            overflow:hidden;
        }
        .scroll-bottom{
            text-align: center;
            line-height: 40px;
        }
    }
</style>
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

使用：


<template>
    <div class="index">
        <my-scroll :page="page" :on-refresh="onRefresh" :on-pull="onPull">
        <div slot="scrollList">
            <ul>
                <li v-for="(x,index) in list" :key="index">列表</li>
            </ul>
        </div>
        </my-scroll>
    </div>
</template>
<script type="text/javascript">
    import myScroll from '@/components/myScroll.vue'
    export default {
        data(){
            return{
                list:[],
                page:{
                    counter:1,  
                    pageStart:1,  
                    pageEnd:1,  
                    total:10
                },
            }
        },
        methods:{
            onRefresh(mun){ //刷新回调
                    setTimeout(()=>{
                        this.$root.$emit('setState',3)
                    },500)
            },
            onPull(mun){ //加载回调
                if(this.page.counter<=this.page.total){
                    setTimeout(()=>{
                        this.page.counter++
                        this.$root.$emit('setState',5)
                        for(let i=0;i<10;i++){
                            this.listdata.push({})
                        }
                    },500)
                }else{
                    this.$root.$emit('setState',7)
                }
            },
 
        },
        components:{
            myScroll
        },
        created(){
 
        },
        mounted(){
            for(let i=0;i<1*50;i++){
                this.list.push({})
            }
 
        },
 
    }
</script>
<style lang="scss" scoped>
    .index{
 
    }
</style>
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

上拉刷新实现思路：
1.通过touchstart获取用户第一次点击的坐标
2.通过touchmove 判断向上滑动还是向下
4.判断列表的滚动条是否在最顶部
5.然后判断在这个屏幕滑动的比例进行状态显示
下拉加载实现思路：
1.通过判断滚动条位置实现下拉加载

样式：
这里写图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/1009033