vue 实现下拉在加载 上拉加载刷新

话不多说，直接看代码；

一；引入插件：

  将这个放在componets组件文件下面

<template lang="html">
    <div class="yo-scroll"
         :class="{'down':(state===0),'up':(state==1),refresh:(state===2),touch:touching}"
         @touchstart="touchStart($event)"
         @touchmove="touchMove($event)"
         @touchend="touchEnd($event)"
         @scroll="(onInfinite || infiniteLoading) ? onScroll($event) : undefined">
        <section class="inner" :style="{ transform: 'translate3d(0, ' + top + 'px, 0)' }">
            <header class="pull-refresh">
                <slot name="pull-refresh">
                    <span class="down-tip">下拉更新</span>
                    <span class="up-tip">松开更新</span>
                    <span class="refresh-tip">更新中</span>
                </slot>
            </header>
            <slot></slot>
            <footer class="load-more">
                <slot name="load-more">
                    <span></span>
                </slot>
            </footer>
        </section>
    </div>
</template>

<script>
    export default {
        props: {
            offset: {
                type: Number,
                default: 40
            },
            enableInfinite: {
                type: Boolean,
                default: true
            },
            enableRefresh: {
                type: Boolean,
                default: true
            },
            onRefresh: {
                type: Function,
                default: undefined,
                required: false
            },
            onInfinite: {
                type: Function,
                default: undefined,
                require: false
            }
        },
        data() {
            return {
                top: 0,
                state: 0,
                startY: 0,
                touching: false,
                infiniteLoading: false
            }
        },
        methods: {
            touchStart(e) {
                this.startY = e.targetTouches[0].pageY
                this.startScroll = this.$el.scrollTop || 0
                this.touching = true
            },
            touchMove(e) {
                if (!this.enableRefresh || this.$el.scrollTop > 0 || !this.touching) {
                    return
                }
                let diff = e.targetTouches[0].pageY - this.startY - this.startScroll
                if (diff > 0) e.preventDefault()
                this.top = Math.pow(diff, 0.8) + (this.state === 2 ? this.offset : 0)

                if (this.state === 2) { // in refreshing
                    return
                }
                if (this.top >= this.offset) {
                    this.state = 1
                } else {
                    this.state = 0
                }
            },
            touchEnd(e) {
                if (!this.enableRefresh) return
                this.touching = false
                if (this.state === 2) { // in refreshing
                    this.state = 2
                    this.top = this.offset
                    return
                }
                if (this.top >= this.offset) { // do refresh
                    this.refresh()
                } else { // cancel refresh
                    this.state = 0
                    this.top = 0
                }
            },
            refresh() {
                this.state = 2
                this.top = this.offset
                this.onRefresh(this.refreshDone)
            },
            refreshDone() {
                this.state = 0
                this.top = 0
            },

            infinite() {
                this.infiniteLoading = true
                this.onInfinite(this.infiniteDone)
            },

            infiniteDone() {
                this.infiniteLoading = false
            },

            onScroll(e) {
                if (!this.enableInfinite || this.infiniteLoading) {
                    return
                }
                let outerHeight = this.$el.clientHeight
                let innerHeight = this.$el.querySelector('.inner').clientHeigh;
                let scrollTop = this.$el.scrollTop
                let ptrHeight = this.onRefresh ? this.$el.querySelector('.pull-refresh').clientHeight : 0
                let infiniteHeight = this.$el.querySelector('.load-more').clientHeight
                let bottom = innerHeight - outerHeight - scrollTop - ptrHeight
                if (bottom < infiniteHeight) this.infinite()
            }
        }
    }
</script>
<style>
    .yo-scroll {
        position: absolute;
        top: 45px;
        right: 0;
        bottom: 0;
        left: 0;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        background-color: #ddd
    }
    .yo-scroll .inner {
        position: absolute;
        top: -45px;
        width: 100%;
        transition-duration: 300ms;
    }
    .yo-scroll .pull-refresh {
        position: relative;
        left: 0;
        top: 0;
        width: 100%;
        height: 45px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .yo-scroll.touch .inner {
        transition-duration: 0ms;
    }
    .yo-scroll.down .down-tip {
        display: block;
    }
    .yo-scroll.up .up-tip {
        display: block;
    }
    .yo-scroll.refresh .refresh-tip {
        display: block;
    }
    .yo-scroll .down-tip,
    .yo-scroll .refresh-tip,
    .yo-scroll .up-tip {
        display: none;
    }
    .yo-scroll .load-more {
        height: 3rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>

二，实现 分页，上拉下拉更新操作；

    这里是视图模块

<template>
	<div class="body newmember-all">

		<div class="container">
			<header class="mui-bar mui-bar-nav">
				<a class=" mui-icon mui-icon-left-nav mui-pull-left" v-on:click="goback"></a>
				<h1 class="mui-title">{{accountName}}负责会员</h1>
				<span class="mui-icon mui-icon-right-nav mui-pull-right" @click="fphy">调配会员</span>
			</header>
            <v-scroll :on-refresh="onRefresh" :on-infinite="onInfinite">
			<div class="newmember">
				<div class="main">
					<div class="list-cn"  >
						<div class="list" v-for="item in accoutrows">
							<p class="name">{{item.name}}<span>{{item.sex}}</span>	</p>
							<p>{{item.birthday}}岁</p>
							<p>{{item.level}}</p>
							<p v-if="item.is_visit == '已回访'" > <span style="color: blue" class="visit">{{item.is_visit}}</span></p>
                            <p v-else> <span style="color: red" class="visit">{{item.is_visit}}</span></p>
						</div>

					</div>
            	</div>
			</div>
            </v-scroll>
		</div>

	</div>
</template>

三；

   这里主要是 js 方法 和  注册组件

<script>
    import Scroll from '@/components/shopScroll'
    import { Checklist } from 'mint-ui';
	export default{
        data(){
			return{
                accountName:this.$route.query.accountName,
                pharmacist_id:this.$route.query.pharmacist_id,
                task_id:this.$route.query.task_id,
                accoutrows:[],   //所有会员
                pageNo: 1,    //当前页数
                pageSize: 15, //每页记录长度
                total: 0 ,    //总记录数
                pageTotal:0   //最大页数
			}
		},
		mounted(){
			this.getaccoutDetail(this.pageNo, this.pageSize);
			this.autoHeight();  //分页插件高度
		},
		methods:{
			goback(){ //返回上一级
				window.history.back();
			},
			fphy(){ //跳转下一个页面
                this.$router.push({path:'newmember2',
                    query:{
                        pharmacist_id :this.pharmacist_id,
                        task_id:this.task_id,
                        accountName:this.accountName,
                    }
                });
			},
            getaccoutDetail(pageNo,pageSize){  //获得所有会员
                this.$http.get('/task/accountListByPharmacist?task_id='+this.task_id+'&pharmacist_id='+this.pharmacist_id
                    +'&rows='+pageSize+'&page='+pageNo+'&type=1')
                    .then((response)=>{
                        if(response.data.code==0){
                            this.total = response.data.total;
                            response.data.rows.forEach(v => this.accoutrows.push(v));
                            this.pageTotal=this.total/this.pageSize;
                        }
                    })
                    .catch(function(error){
                        console.log(error);
                    })
            },
            //下拉
            onRefresh(done) {
                console.log("下拉");
                //清空数据
                this.accoutrows = [];
                //定义当前为第一页
                this.pageNo = 1;
                //重新查询数据
                this.getaccoutDetail(this.pageNo, this.pageSize);
                done()
            },
            //上拉
            onInfinite(done) {
                //var page=this.total/this.pageSize;
                if(this.pageNo <this.pageTotal) {
                    //页数加一
                    this.pageNo++;
                    //执行查询下一页
                    this.getaccoutDetail(this.pageNo, this.pageSize);
                }
                done();
            },
            autoHeight() {  //设置分页插件高度
                var h = $(window).height();
                var h_old = 0;
                if(h > h_old) {
                    $(".yo-scroll").css('height', h-45 + 'px');
                    $(".yo-scroll").css('background-color',  'white');
                } else {
                    return false;
                }
            },

		},components: {
            'v-scroll': Scroll
        },
	}
</script>

四：分析

其实下拉加载 和上拉加载并不难；主要的难点在于组件的思路逻辑，以及 高度样式的设计,因为自己本身也是对于vue 的动态参数和组件库不是太了解，导致写这个上拉下拉刷新 加载分页 花了很多时间~