上拉加载，下拉刷新

上拉加载

image.png
image.png

下拉刷新

image.png
image.png

组件代码：

<template>
    <div class="pullto" :style="'height:'+bodyheight+'px'">
        <!--上拉-->
        <div v-if="statement==1">
            <pull-to class="pullbock"
                     :is-bottom-bounce="true"
                     :style="'height:'+bodyheight+'px'"
                     :bottom-load-method="refresh"
                     @bottom-state-change="change"
                     @bottom-pull="bottompull">
                <slot name="listblock"></slot>
                <div class="extra"></div>
                <div class="topblock" slot="bottom-block">
                    <div class="icondiv">
                        <div :class="type=='pull'?'iconfont icon-down1 iconspan':
                                (type=='loading'?'iconfont icon-loading iconspan rotate':
                                (type=='loading-fail'?'iconfont icon-erroring iconspan':
                                (type=='loading-done'?'iconfont iconspan':'')))"></div>
                    </div>
                    <span>{{state}}</span>
                </div>
            </pull-to>
        </div>

        <!--下拉-->
        <div v-if="statement==2">
            <pull-to class="pullbock"
                     :is-top-bounce="true"
                     :style="'height:'+bodyheight+'px'"
                     :top-load-method="refreshtop"
                     @top-state-change="changetop"
                     @top-pull="toppull">
                <slot name="listblock2"></slot>
                <div class="extra"></div>
                <div class="topblock" slot="top-block">
                    <div class="icondiv">
                        <div :class="toptype=='pull'?'iconfont icon-fangxiangjiantou-copy-copy-copy iconspan':
                                (toptype=='loading'?'iconfont icon-loading iconspan rotate':
                                (toptype=='loading-fail'?'iconfont icon-erroring iconspan':''))"></div>
                    </div>
                    <span>{{topstate}}</span>
                </div>
            </pull-to>
        </div>

        <!--上拉+下拉-->
        <div v-if="statement==3">
            <div class="opacityZati"
                 style="height:100vh;width:100%;opacity:0;z-index:1000;position:fixed;top:0;left:0; background:red"
                 v-if="isBlock"></div>
            <pull-to class="pullbock"
                     :is-bottom-bounce="true"
                     :is-top-bounce="true"
                     :style="'height:'+bodyheight+'px'"
                     :bottom-load-method="refresh"
                     :top-load-method="refreshtop"
                     @bottom-state-change="change"
                     @top-state-change="changetop"
                     @bottom-pull="bottompull"
                     @top-pull="toppull">
                <slot name="listblock3"></slot>
                <div class="extra"></div>
                <div class="topblock" slot="bottom-block">
                    <!--icon-success-->
                    <div class="icondiv">
                        <div :class="type=='pull'?'iconfont icon-down1 iconspan':
                                (type=='loading'?'iconfont icon-loading iconspan rotate':
                                (type=='loading-fail'?'iconfont icon-erroring iconspan':
                                (type=='loading-done'?'iconfont iconspan':'')))"></div>
                    </div>
                    <span>{{state}}</span>
                </div>
                <div class="topblock" slot="top-block">
                    <div class="icondiv">
                        <div :class="toptype=='pull'?'iconfont icon-fangxiangjiantou-copy-copy-copy iconspan':
                                (toptype=='loading'?'iconfont icon-loading iconspan rotate':
                                (toptype=='loading-fail'?'iconfont icon-erroring iconspan':
                                (toptype=='loading-done'?'iconfont icon-success iconspan':'')))"></div>
                    </div>
                    <span>{{topstate}}</span>
                </div>
            </pull-to>
        </div>
        <!--无-->
        <div v-if="statement==4">
            <pull-to class="pullbock"
                     :is-top-bounce="false"
                     :style="'height:'+bodyheight+'px'"
                     :top-load-method="refreshtop"
                     @top-state-change="changetop"
                     @top-pull="toppull">
                <slot name="listblock4"></slot>
                <div class="extra"></div>
            </pull-to>
        </div>
    </div>
</template>
<script>
  import PullTo from 'vue-pull-to';
  export default {
    name: 'example',
    data() {
        return {
            dataList: [1, 2, 3, 4, 5, 6, 7, 8],
            topConfig: {
                pullText: '上拉加载更多数据', // 下拉时显示的文字
                triggerText: '释放更新', // 下拉到触发距离时显示的文字
                loadingText: '加载中', // 加载中的文字
                doneText: '加载完成', // 加载完成的文字
                failText: '加载失败', // 加载失败的文字
                loadedStayTime: 400, // 加载完后停留的时间ms
                stayDistance: 250, // 触发刷新后停留的距离
                triggerDistance: 70 // 下拉刷新触发的距离
            },
            state: '上拉加载更多数据',
            typing: 'pull',
            topstate: '下拉刷新数据',

            statement: 1,
            className1: '',
            className2: '',
            isBlock: false,
        }
    },
    props: {
        type: String,
        toptype: String,
        bodyheight: Number,

        stating: Number,               //1.默认只有下拉，2.默认只有上拉，3.上拉下拉都有
    },
    components: {
        PullTo
    },
    methods: {
        refresh(loaded) {
            let _this = this;
            let timer = setTimeout(() => {
                _this.$emit('nextpage');
                loaded(_this.type);
                clearTimeout(timer);
            }, 1000);
        },
        refreshtop(loaded) {
            let _this = this;
            _this.isBlock = true;
            _this.$emit('refresh');
            let timer = setTimeout(() => {
                loaded(_this.toptype);
                _this.isBlock = false;
                clearTimeout(timer);
            }, 1000);
        },
        change(value) {             //pull,trigger,loading,loaded-done
            // console.log('======change value=======>',value)
        },
        changetop(value) {          //pull,trigger,loading,loaded-done
            console.log('======change top=======>', value)
        },
        toppull(value) {
        },
        bottompull(value) {
        },
        typetoState() {
            let _this = this;
            if (_this.type == 'pull') {
                _this.state = '上拉加载更多数据';
            }
            else if (_this.type == 'trigger') {
                _this.state = '释放加载更多数据';
            }
            else if (_this.type == 'loading') {
                _this.state = '加载中...';

            }
            else if (_this.type == 'loading-done') {
                _this.state = '已经到底了';
            }
            else if (_this.type == 'loading-fail') {
                _this.state = '加载失败';
            }
            else {
                console.log('上拉的其他情况');
            }
        },
        toptoState() {
            let _this = this;
            if (_this.toptype == 'pull') {
                _this.topstate = '下拉刷新数据';
            }
            else if (_this.toptype == 'trigger') {
                _this.topstate = '释放刷新数据';
            }
            else if (_this.toptype == 'loading') {
                _this.topstate = '刷新中...';
            }
            else if (_this.toptype == 'loading-done') {
                _this.topstate = '刷新成功';
            }
            else if (_this.toptype == 'loading-fail') {
                _this.topstate = '刷新失败';
            }
            else {
                console.log('下拉的其他情况');
            }
        },
    },
    watch: {
        type(val, oldval) {
            this.typetoState();
        },
        toptype(val, oldval) {
            this.toptoState();
        },
        stating(val, oldval) {
            this.statement = this.stating;
            console.log('---------------------stating------------------>', this.stating);
        }
    },
    mounted() {
        this.typetoState();
        this.toptoState();
        if (this.stating) {
            this.statement = this.stating;
        }
    }
}

</script>
<style lang="less" scoped>
    @import './style.css';
</style>