推荐订阅源

    const app = {
        data() {
            return {
                info: [], // 存储题目详情数组
                currentPage: 1, // 当前页码
                pageSize: 3, // 每页显示的题目数量
                sjid: sjid, // 注意：这里假设sjid已经定义
                isLoading: false, // 是否正在加载数据
                hasMore: true // 是否有更多数据可以加载
            };
        },
        methods: {
            fetchData(page = 1) {
                if (this.isLoading || !this.hasMore) return; // 如果正在加载或没有更多数据，则不执行

                this.isLoading = true;
                axios
                    .get('/api/shijuan/timu_list.html', {
                        params: {
                            p: page,
                            limit: this.pageSize,
                            sjid: this.sjid
                        }
                    })
                    .then(response => {
                        if (response.data.data.length === 0) {
                            this.hasMore = false; // 如果没有返回数据，则认为没有更多数据
                        } else {
                            this.info = this.info.concat(response.data.data); // 合并数据
                            this.currentPage = response.data.p; // 更新当前页码（如果API返回了当前页码）
                        }
                        this.isLoading = false;
                    })
                    .catch(error => {
                        console.error('Error fetching data:', error);
                        this.isLoading = false;
                    });
            },
            handleScroll() {
                const windowHeight = window.innerHeight;
                const scrollPosition = window.scrollY + windowHeight;
                const documentHeight = document.documentElement.offsetHeight;

                if (scrollPosition >= documentHeight - 100 && !this.isLoading && this.hasMore) {
                    // 当滚动到页面底部时加载更多数据
                    this.fetchData(this.currentPage);
                }
            }
        },
        mounted() {
            this.fetchData(this.currentPage);
            window.addEventListener('scroll', this.handleScroll);
        },
        beforeUnmount() {
            // 组件销毁前移除事件监听器
            window.removeEventListener('scroll', this.handleScroll);
        }
    };
    Vue.createApp(app).mount('#app');

    <div class="am-list-news-bd" id="app" @scroll="handleScroll">
        <ul class="am-list yulan-box">
            <li class="am-g  questions-box" v-for="site in info">
                <a :href="'http://yy.t.ihwrm.com/index/shijuan/timu_info.html?sjid='+site.sjid+'&tmid='+site.tmid" class="am-list-item-hd">

                    <p class="question clearfix">
                        <span class="q-type" style="margin-top:3px;">{{ site.tx_name }}</span>
                        <span class="question-tit">
                            <span class="red"></span>
                            {{ site.tigan }}
                        </span>
                    </p>
                </a>
                <span class="am-list-date">{{ site.datetime }}</span>
            </li>
        </ul>
        <!-- 加载更多提示 -->
        <div v-if="isLoading" class="loading">加载中...</div>
        <!-- 底部边界，用于触发加载 -->
        <div ref="bottomBoundary" style="height: 50px;"></div>
    </div>