uniapp 实现scroll-view滚动加载、下拉刷新

<scroll-view class="scroll-view" :scroll-y="true" @scrolltolower="scrolltolower">
    <view class="item" v-for="(item,index) in records" :key="index">
        xxx
    </view>
</scroll-view>

export default {
    data() {
        return {
            records: [],
            page: 1,
            isOver: false,
        }
    },
    onShow() {
        this.getRecords()
    },
    onPullDownRefresh() {
        this.page = 1
        this.getRecords();
    },
    methods: {
        getRecords() {
            uni.showLoading({
                title: '数据加载中...'
            })
            this.$api.sendRequest({
                url: 'xxx',
                data: {
                    page: this.page,
                    per_page: 30
                },
                success: res => {
                    uni.hideLoading()
                    if (200 === res.code) {
                        this.isOver = 30 > res.data.list.length;
                        if (this.page == 1) this.records = [];
                        this.records = this.records.concat(res.data.list);
                    }
                },
                fail: res => {
                    uni.hideLoading()
                }
            });
        },
        scrolltolower() {
            if (this.isOver) return
            this.page = this.page + 1
            this.getRecords()
        }
    }
}
</script>

.scroll-view {
    width:100%;
    max-height: 50vh;
}