懒人上拉下拉

<template>
    <div class="content">
        <div class="infoContent" ref="infoContent">
            <scroller :on-infinite="infinite" :on-refresh="refresh" ref="my_pull" :noDataText="noDataText">
                <div>
                    <div v-for="item in servers" :key="item.id" class="infoBody">
                    </div>
                </div>
            </scroller>
        </div>
    </div>
</template>

<script>
    export default {
        data: () => ({
            servers: {},
            active: '',
            page: 0, // 当前页数
            rows: 6, // 当期条数
            isLast: false, //不是最后一页
        }),
        created() {
            this.$store.dispatch("newTitle", "留言板")
        },
        mounted() {
            this.$nextTick(() => {
                let a = document.documentElement.clientHeight;
                let b = this.$refs.infoContent.getBoundingClientRect().top
                this.$refs.infoContent.style.height = a - b + "px"
            })
        },
        methods: {
            getServers() {
                // $App.showWebActivity(); //和android交互
                this.$http.post(this.root + "thFarm/queryMessageList", {
                    key: this.zkey,
                    code: this.zcode,
                    memberId: sessionStorage.getItem('memberFarmId'),
                    mFramId: sessionStorage.getItem('mFramId'),
                    page: this.page,
                    rows: 5
                }, {
                    emulateJSON: true
                }).then((res) => {
                    // $App.dismissWebActivity()
                    if (res.body.code === 100) {
                        this.isOpt = res.body.list.isOpt;
                        console.log(res);
                        // 1. 判断是否是第一页
                        if (this.page != 1) {
                            // 说明不是第一页,要拼接上一页的数据
                            this.servers = this.servers.concat(res.body.list.rows);
                        } else {
                            // 第一页
                            this.servers = res.body.list.rows;
                            console.log(this.servers);
                            if (res.body.list.rows.length == 0) {
                                // 第一页没有数据
                                this.noimgOk = true
                                this.noDataText = "没有更多数据"
                            } else {
                                this.noDataText = "没有更多数据"
                            }
                        }
                        // 1. 判断下一页是否还有数据
                        if (res.body.list.rows.length >= this.rows) {
                            // 说明可能还有数据
                            this.$refs.my_pull.finishInfinite(false);
                            this.isLast = false
                        } else {
                            // 说明没有更多数据了
                            this.$refs.my_pull.finishInfinite(true);
                            this.isLast = true
                        }
                    } else {
                        console.log(res);
                    }
                }, (err) => {
                    // $App.dismissWebActivity()
                    console.log(err);
                })
            },
            // 上拉
            infinite: function() {
                console.log('infinite')
                if (!this.isLast) {
                    this.page++
                        console.log("this.page " + this.page);
                    this.getServers()
                } else {
                    this.$refs.my_pull.finishInfinite(true);
                }
            },
            // 下拉
            refresh: function() {
                console.log('refresh')
                this.$refs.my_pull.finishPullToRefresh()
                this.page = 1
                console.log("this.page " + this.page);
                this.getServers()
            },
        },
    }
</script>

<style lang="less" scoped>
    .content {
        .infoContent {
            position: relative;
            .infoBody {
                height: 300px;
            }
        }
    }
</style>