vue-scroller的简单使用

<template>
    <div class="content">
        <div class="infoTop">
            <ul>
                <li v-for="item in list" :key="item.id" :class="{active: active == item.id}" @click="changeActive(item.id)">{{item.name}}</li>
            </ul>
        </div>
        <div class="infoContent" ref="infoContent">
            <scroller :on-infinite="infinite" :on-refresh="refresh" ref="my_pull" :noDataText="noDataText">
                <div v-for="item in 20" :key="item">
                    <div>
                        <h3>aaa</h3>
                        <p>aaa</p>
                    </div>
                    <div>
                    </div>
                </div>
            </scroller>
        </div>
    </div>
</template>

<script>
    export default {
        data: () => ({
            list: [{
                    id: 0,
                    name: "全部"
                },
                {
                    id: 1,
                    name: "待审核"
                },
                {
                    id: 2,
                    name: "已通过"
                },
                {
                    id: 3,
                    name: "已驳回"
                },
            ],
            active: 0,
            page: 0, // 当前页数
            rows: 6, // 当期条数
            isLast: false, //不是最后一页
        }),
        computed: {},
        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: {
            changeActive(id) {
                this.active = id
            },
            // 上拉
            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()
            },
            getServers() {
                $App.showWebActivity(); //和android交互
                this.$http.post(this.root + "************", {
                    key: this.zkey,
                    code: this.zcode,
                    pages: this.page,
                    rows: this.rows,
                    memberId: sessionStorage.getItem("memberId")
                }, {
                    emulateJSON: true
                }).then((res) => {
                    $App.dismissWebActivity()
                    if (res.body.code === 0) {
                        console.log(res);
                        if (this.page != 1) {
                            // 说明不是第一页,要拼接上一页的数据
                            this.servers = this.servers.concat(res.body.page);
                        } else {
                            // 第一页
                            this.servers = res.body.page
                            if (res.body.page.length == 0) {
                                // 第一页没有数据
                                this.noimgOk = true
                                this.noDataText = ""
                            } else {
                                this.noDataText = "没有更多数据"
                            }
                        }
                        if (res.body.page.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);
                })
            },
        },
    }
</script>

<style lang="less" scoped>
    .content {
        height: 100%;
        .infoTop {
            background: #fff;
            margin-bottom: 15px;
            ul {
                display: flex;
                li {
                    width: 25%;
                    height: 50px;
                    line-height: 50px;
                    text-align: center;
                    border-bottom: 2PX solid #ccc;
                    &.active {
                        border-bottom: 2PX solid red;
                    }
                }
            }
        }
        .infoContent {
            position: relative;
            width: 100%;
        }
    }
</style>