<template>
    <div>
        <div class="head">结果记录</div>
        <div class="lotteryrecord">
            <el-scrollbar id="resultScroll"  ref="myScrollbar" style="height: 100%">
                <div class="list-div" v-for="item in list">
                    <span>{{item.sceneSn}}</span>
                    <span>{{item.result}}</span>
                </div>
            </el-scrollbar>
        </div>
    </div>
</template>

<script>
    export default {
        name: "index",
        data() {
            return {
                resultList: {}, // 接口数据
                list: [], // 记录列表
                scrollTop: 0,
                tradPageNo: 1, // 当前页
            };
        },
        mounted(){
            var that = this
             // 监听滚动事件
            document.getElementById('resultScroll').addEventListener('scroll', that.handleScroll,true)
        },
        methods: {
            handleScroll(){
                var that = this
                var sh = that.$refs['myScrollbar'].$refs['wrap'].scrollHeight // 滚动条高度
                var st = that.$refs['myScrollbar'].$refs['wrap'].scrollTop // 滚动条距离顶部的距离
                var ch = that.$refs['myScrollbar'].$refs['wrap'].clientHeight // 滚动条外容器的高度
                if (st + ch >= sh) {
           
                    //到底了-业务逻辑
                   
                    that.tradPageNo += 1
                    if(that.tradPageNo<=that.resultList.page.totalPage){
                        that.getResultList()
                    }


                }

            },
            // 獲取開獎結果
           getResultList() {
             var that = this
             var data = {
                  pageNo: that.tradPageNo,
                  pageSize: 10
             };
                ResultList(data).then(res => {
                    if (res.errno === 0) {
                        that.resultList = res.result
                        that.list = that.list.concat(res.result.list)
                    }
                })
            },

        }
    }
</script>

<style scoped>
 
</style>

1、给容器id添加监听滚动条事件

2、判断滚动条是否到达底部

3、然后触发数据加载事件

注：下拉加载的数据需要使用concat拼接数组

补充：针对评论区"warp"的一个补充

因为上述采用的是element UI里面的el-scrollbar组件，故warp是该组件内一个dom，使用该组件时需给父节点lotteryrecord定义一个高度，并给el-scrollbar设置高度为100%。

不采用el-scrollbar的滚动加载：

<template>
    <div>
        <div class="head">结果记录</div>
        <div class="lotteryrecord">
            <div id="resultScroll"  ref="myScrollbar" style="height: 300px;overflow:auto">
                <div class="list-div" v-for="item in list">
                    <span>{{item.sceneSn}}</span>
                    <span>{{item.result}}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "index",
        data() {
            return {
                resultList: {}, // 接口数据
                list: [], // 记录列表
                scrollTop: 0,
                tradPageNo: 1, // 当前页
            };
        },
        mounted(){
            var that = this
             // 监听滚动事件
            document.getElementById('resultScroll').addEventListener('scroll', that.handleScroll,true)
        },
        methods: {
            handleScroll(){
                var that = this
                var sh = that.$refs['myScrollbar'].scrollHeight // 滚动条高度
                var st = that.$refs['myScrollbar'].scrollTop // 滚动条距离顶部的距离
                var ch = that.$refs['myScrollbar'].clientHeight // 滚动条外容器的高度
                if (st + ch >= sh) {
           
                    //到底了-业务逻辑
                   
                    that.tradPageNo += 1
                    if(that.tradPageNo<=that.resultList.page.totalPage){
                        that.getResultList()
                    }


                }

            },
            // 获取结果列表
           getResultList() {
             var that = this
             var data = {
                  pageNo: that.tradPageNo,
                  pageSize: 10
             };
                ResultList(data).then(res => {
                    if (res.errno === 0) {
                        that.resultList = res.result
                        that.list = that.list.concat(res.result.list)
                    }
                })
            },

        }
    }
</script>

<style scoped>
 
</style>